Tôi có thể sử dụng HTML phức tạp với Tooltip của Twitter Bootstrap không?

Nếu tôi kiểm tra tài liệu chính thức , tôi có thể thấy một thuộc tính được gọi là HTML:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

Nó nói, "chèn html vào tooltip", nhưng kiểu này là boolean. Làm cách nào tôi có thể sử dụng html phức tạp bên trong Tooltip?

Tham số này chỉ là về việc bạn sẽ sử dụng html phức tạp vào tooltip. Đặt nó vào truevà sau đó nhấn html vàotitle thuộc tính của thẻ.

Xem câu đố này ở đây - Tôi đã đặt thuộc tính html thành true thông qua thẻ data-html="true"trong <a>thẻ và sau đó chỉ cần thêm vào quảng cáo html làm ví dụ.

Cũng như bình thường, sử dụng data-original-title :

Html:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

Javascript:

$("[rel=tooltip]").tooltip({html:true});

Tham số html chỉ định cách biến văn bản chú giải công cụ thành các phần tử DOM. Theo mặc định, mã Html được thoát trong chú giải công cụ để ngăn chặn các cuộc tấn công XSS. Giả sử bạn hiển thị tên người dùng trên trang web của mình và bạn hiển thị tiểu sử nhỏ trong chú giải công cụ. Nếu mã html không được thoát và người dùng có thể tự chỉnh sửa tiểu sử họ có thể tiêm mã độc.

Một giải pháp khác để tránh chèn html vào tiêu đề dữ liệu là tạo div độc lập với nội dung html của tooltip và tham khảo div này khi tạo tooltip của bạn:

<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>

<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
    <h2>Tip title</h2>
    <p>This is my tip content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

Bằng cách này, bạn có thể tạo nội dung html dễ đọc và kích hoạt bao nhiêu chú giải công cụ như bạn muốn.

bản demo trực tiếp tại đây trên codepen

Các htmlthuộc tính dữ liệu không chính xác những gì nó nói nó trong tài liệu. Hãy thử ví dụ nhỏ này, không cần JavaScript (chia thành các dòng để làm rõ):

<span rel="tooltip" 
     data-toggle="tooltip" 
     data-html="true" 
     data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>

Bản trình diễn của JSFiddle:

• Bootstrap 2.x
• Bootstrap 3.x

đặt tùy chọn "html" thành true nếu bạn muốn có html vào tooltip. Html thực tế được xác định bởi tùy chọn "title" (thuộc tính tiêu đề của liên kết không nên được đặt)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Mẫu sống