Bisakah saya menggunakan HTML kompleks dengan Tooltip Twitter Bootstrap?

143

Jika saya memeriksa dokumentasi resmi , saya dapat melihat properti bernama 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.

Ia mengatakan, "masukkan html ke tooltip", tetapi tipenya adalah boolean. Bagaimana saya bisa menggunakan html kompleks di dalam Tooltip?

javascript html twitter-bootstrap-3 tooltip sergserg
sumber

Jawaban:

256

Parameter ini hanya tentang apakah Anda akan menggunakan html kompleks ke tooltip. Atur ke truelalu tekan html ke dalamtitle atribut tag.

Lihat biola ini di sini - Saya telah menetapkan atribut html menjadi true melalui data-html="true"dalam <a>tag dan kemudian baru ditambahkan dalam html ad hoc sebagai contoh.

George Wilson
sumber
3
Yah, dokumentasi mereka tidak begitu jelas di bidang itu. Terima kasih telah membagikan jawaban ini! :)
sergserg
3
Dokumentasi bootstrap terkenal sebagai sampah :) Senang saya bisa membereskan semuanya!
George Wilson
6
Contoh biola tidak bekerja untuk saya. Saya masih melihat kode HTML mentah.
Sonson123
3
Mungkin beberapa perubahan pada kode Bootstrap seperti yang Anda curigai. Sebelum saya memiliki semua tooltips saya ditransfer untuk judul html menggunakan {html: true} dalam atribut fungsi, tetapi pergi dari 2.2.2> 2.3.1, saya harus menambahkan data-html = "true" ke elemen saya dan hanya membatalkan {html: true} bagian. Saya benar-benar berharap mereka akan mencoba untuk memperbaikinya lebih sering pada kali pertama dan tidak menyebabkan perubahan terus-menerus antar rilis.
Andrew Swihart
1
Lihat di sini: jsfiddle.net/44khF/148 . Selain itu, sepertinya hanya berfungsi dengan atribut data dan tidak menggunakan html: true dalam inisialisasi jika delegasi digunakan.
ptutt
34

Sama seperti biasa, menggunakan data-original-title :

Html:

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

Javascript:

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

Parameter html menentukan bagaimana teks tooltip harus diubah menjadi elemen DOM. Secara default kode Html lolos dalam tooltips untuk mencegah serangan XSS. Katakanlah Anda menampilkan nama pengguna di situs Anda dan Anda menampilkan bio kecil di tooltip. Jika kode html tidak lolos dan pengguna dapat mengedit bio sendiri, mereka dapat menyuntikkan kode berbahaya.

Matt Zeunert
sumber
5
data-original-titleadalah tempat bootstrap menyimpan sementara titlejika ada. data-titlesudah cukup jika Anda tidak memiliki gelar, seperti a<a href="#" title="xxx">
davidkonrad
itu luar biasa dan sederhana
Gayan
Hello @MattZeunert Saya telah menggunakannya dan berjalan dengan sangat baik tetapi saya ingin memperbarui judul sesuai data saya yang akan datang tanpa memuat ulang halaman dan mengatur secara dinamis, maksud saya mengubah konten di dalam judul.
3 aturan
32

Solusi lain untuk menghindari memasukkan html ke dalam data-judul adalah membuat div independen dengan tooltip konten html, dan merujuk ke div ini ketika membuat tooltip Anda:

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

Dengan cara ini Anda dapat membuat konten html yang mudah dibaca, dan mengaktifkan sebanyak mungkin tooltips yang Anda inginkan.

live demo di sini di codepen

migli
sumber
Fantastis. Saya sangat senang seseorang mengusulkan solusi yang tidak menjejalkan HTML langsung ke properti data.
Mir
27

The htmldata atribut tidak persis apa yang dikatakannya itu tidak dalam dokumen. Coba contoh kecil ini, tidak perlu JavaScript (dipecah menjadi beberapa baris untuk klarifikasi):

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


Demo JSFiddle:

davidkonrad
sumber
7

setel opsi "html" menjadi true jika Anda ingin memiliki html ke dalam tooltip. HTML aktual ditentukan oleh opsi "judul" (atribut judul tautan tidak boleh ditetapkan)

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

Sampel langsung

Andriy F.
sumber