Làm cách nào để hiển thị chú giải công cụ khởi động với đối tượng SVG?

Question

tôi sẽ điên cố gắng tìm hiểu tại sao tôi có thể hiển thị tooltips trên các yếu tố HTML thông thường, nhưng không phải trên SVGs D3 tạo: http://jsfiddle.net/nachocab/eQmYX/5/

Tôi đang làm gì sai?

$(document).ready(function() { 
    $("a").tooltip({ 
     'placement': 'bottom' 
    }); // this works 

    $("my_circle").tooltip({ 
     'placement': 'bottom' 
    }); // this does not work 
}); 

Answer 1

Vấn đề là các tooltip rằng Bootstrap v2.2.2 tạo là một <div> rằng đã nhận được chèn vào bên trong <svg>, khiến trình duyệt không render nó.

Tôi đã sử dụng phiên bản phát triển mới nhất của Bootstrap Tooltip, thêm một thông số mới để xác định vùng chứa của chú giải công cụ. Bây giờ tôi có thể làm:

$(".my_circle").tooltip({ 
    'container': 'body', 
    'placement': 'bottom' 
}); // this works! 

EDIT - Một năm sau

Đối với hồ sơ, Anh đã đánh rơi những yêu cầu jQuery và bây giờ tôi đang sử dụng tuyệt vời d3-tip Justin Palmer.

Answer 2

Sử dụng thư viện d3-bootstrap. Thư viện này sẽ cung cấp cho bạn các cảnh báo, popovers và chức năng tooltip tương thích với D3.js Bạn có thể thêm mã sau vào jsFiddle của mình.

Thêm phần này vào phần đầu của bạn.

<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"/> 

Thêm mã này vào phần mã của bạn.

d3.selectAll(".my_circle") 
    .call(d3.tooltip().placement("right"));