ฉันสามารถใช้ HTML ที่ซับซ้อนกับคำแนะนำเครื่องมือของ Twitter Bootstrap ได้หรือไม่

ถ้าฉันตรวจสอบเอกสารอย่างเป็นทางการฉันสามารถดูคุณสมบัติที่เรียกว่า 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.

มีข้อความระบุว่า "แทรก html ลงในคำแนะนำเครื่องมือ" แต่ประเภทนั้นเป็นบูลีน ฉันจะใช้ html แบบซับซ้อนใน Tooltip ได้อย่างไร

พารามิเตอร์นี้เป็นเพียงเกี่ยวกับว่าคุณจะใช้ซับซ้อน HTML ในเคล็ดลับเครื่องมือ กำหนดเป็นtrueแล้วกด html ลงในtitleแอตทริบิวต์ของแท็ก

ดูซอนี้ที่นี่ - ฉันได้ตั้งค่าแอตทริบิวต์ html เป็นจริงผ่านdata-html="true"ใน<a>แท็กและจากนั้นก็เพิ่มใน html ad hoc เป็นตัวอย่าง

เหมือนปกติโดยใช้data-original-title:

Html:

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

javascript:

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

พารามิเตอร์ html ระบุว่าข้อความคำแนะนำเครื่องมือควรเปลี่ยนเป็นองค์ประกอบ DOM ได้อย่างไร โดยค่าเริ่มต้นรหัส Html จะถูกหลบหนีในเคล็ดลับเครื่องมือเพื่อป้องกันการโจมตี XSS สมมติว่าคุณแสดงชื่อผู้ใช้บนเว็บไซต์ของคุณและคุณแสดงประวัติขนาดเล็กในคำแนะนำเครื่องมือ หากรหัส html ไม่ได้รับการยกเว้นและผู้ใช้สามารถแก้ไขไบโอเองพวกเขาสามารถฉีดโค้ดอันตราย

อีกวิธีหนึ่งในการหลีกเลี่ยงการแทรก html ลงในdata-titleคือการสร้าง div อิสระด้วย tooltip เนื้อหา HTML และอ้างอิง div นี้เมื่อสร้าง tooltip ของคุณ:

<!-- 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>

วิธีนี้คุณสามารถสร้างเนื้อหา HTML ที่สามารถอ่านได้ที่ซับซ้อนและเปิดใช้งานคำแนะนำเครื่องมือได้มากเท่าที่คุณต้องการ

การสาธิตสดที่นี่บน codepen

htmlแอตทริบิวต์ข้อมูลที่ไม่ตรงกับสิ่งที่มันบอกว่ามันจะอยู่ในเอกสาร ลองตัวอย่างเล็ก ๆ น้อย ๆ นี้โดยไม่จำเป็นต้องใช้ JavaScript (แยกเป็นบรรทัดเพื่อชี้แจง):

<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>

การสาธิต JSFiddle:

• Bootstrap 2.x
• Bootstrap 3.x

ตั้งค่าตัวเลือก "html" เป็นจริงหากคุณต้องการให้ html เป็นคำแนะนำเครื่องมือ html ที่แท้จริงถูกกำหนดโดยตัวเลือก "ชื่อ" (ไม่ควรตั้งค่าแอตทริบิวต์ชื่อลิงก์)

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

ตัวอย่างสด