Tooltip UI Jquery tidak mendukung konten html


86

Hari ini, saya mengupgrade semua plugs-in jQuery saya dengan jQuery 1.9.1. Dan saya mulai menggunakan tooltip jQueryUI dengan jquery.ui.1.10.2. Semuanya baik-baik saja. Tapi ketika saya menggunakan tag HTML di konten (di titleatribut elemen yang saya terapkan tooltip), saya perhatikan bahwa HTML tidak didukung.

Ini adalah tangkapan layar dari tooltip saya:

masukkan deskripsi gambar di sini

Bagaimana cara membuat konten HTML berfungsi dengan tooltip jQueryUI di 1.10.2?


1
Apakah ini sesuatu yang baru saja rusak sejak Anda meningkatkan? Tampaknya berfungsi dengan baik untuk saya di jQuery 1.9.1, jQuery UI 1.9.2 jsfiddle.net/2n3DL/1
metadept

Hmm. Itu ide yang bagus. Bolehkah saya mengajukan satu pertanyaan lagi jika Anda mengizinkan saya. Oke, saya memiliki ikon tooltip dan memiliki kelas bernama "tooltip" seperti ini: <img src = "images / info.png" class = "tooltip" title = "Beberapa HTML <b> hebat </b> tooltip text! "> Bagaimana saya bisa menggunakan seperti ini? Salam Hormat.

lihat metadepts biola yang diperbarui dengan jquery ui 1.10.2 di sini dan jquery 1.9.1. Ini masih berfungsi.
SachinGutte

@phobos: Tidak, tidak. Ada <b></b>tag tepat di tooltip.
Andrew Whitaker

1
Arahkan kursor ke atas "Beberapa masukan" (Keterangan alat yang langsung mengembalikan konten HTML berfungsi dengan baik). Saya tahu pertanyaan OP agak tidak jelas, tapi saya berasumsi dia menggunakan HTML dalam titleatribut, yang tidak didukung pada 1.10.
Andrew Whitaker

Jawaban:


186

Sunting : Karena ini ternyata jawaban yang populer, saya menambahkan penafian yang disebutkan @crush dalam komentar di bawah. Jika Anda menggunakan ini untuk mengatasi masalah ini, ketahuilah bahwa Anda membuka diri terhadap kerentanan XSS . Hanya gunakan solusi ini jika Anda tahu apa yang Anda lakukan dan dapat memastikan konten HTML di atributnya.


Cara termudah untuk melakukannya adalah dengan menyediakan fungsi ke contentopsi yang menggantikan perilaku default:

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

Contoh: http://jsfiddle.net/Aa5nK/12/

Opsi lainnya adalah mengganti widget tooltip dengan widget Anda sendiri yang mengubah contentopsi:

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

Sekarang, setiap kali Anda menelepon .tooltip, konten HTML akan dikembalikan.

Contoh: http://jsfiddle.net/Aa5nK/14/


4
Satu-satunya masalah dengan ini adalah ia menghindari alasan utama jQuery mulai keluar dari HTML dalam atribut judul untuk memulai.
hancurkan

4
@eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities. Dalam jawaban Andrew, judul tersebut masih harus mengandung HTML yang tidak valid.
hancurkan

Anda dapat memiliki bagian teks dari konten di atribut judul dan kemudian membangun bit HTML di sekitarnya dalam panggilan balik konten Anda untuk menyiasatinya (selama Anda tahu apa yang akan terjadi pada saat itu)
jinglesthula

18

Daripada ini:

$(document).tooltip({
    content: function () {
        return $(this).prop('title');
    }
});

gunakan ini untuk kinerja yang lebih baik

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});

ya, kinerja yang lebih baik, karena saya hanya memiliki beberapa elemen dengan tooltips
datdinhquoc

14

Saya menyelesaikannya dengan tag data khusus, karena atribut judul tetap diperlukan.

$("[data-tooltip]").each(function(i, e) {
    var tag = $(e);
    if (tag.is("[title]") === false) {
        tag.attr("title", "");
    }
});

$(document).tooltip({
    items: "[data-tooltip]",
    content: function () {
        return $(this).attr("data-tooltip");
    }
});

Seperti ini html sesuai dan tooltips hanya ditampilkan untuk tag yang diinginkan.


5

Anda juga dapat mencapai ini sepenuhnya tanpa jQueryUI dengan menggunakan gaya CSS. Lihat cuplikan di bawah ini:

div#Tooltip_Text_container {
  max-width: 25em;
  height: auto;
  display: inline;
  position: relative;
}

div#Tooltip_Text_container a {
  text-decoration: none;
  color: black;
  cursor: default;
  font-weight: normal;
}

div#Tooltip_Text_container a span.tooltips {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 30em;
  border: 1px solid #404040;
  padding: 0.2em 0.5em;
  cursor: default;
  line-height: 140%;
  font-size: 12px;
  font-family: 'Segoe UI';
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 7px 7px 5px -5px #666;
  -webkit-box-shadow: 7px 7px 5px -5px #666;
  box-shadow: 7px 7px 5px -5px #666;
  background: #E4E5F0  repeat-x;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

div#Tooltip_Text_container img {
  left: -10px;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}
<div id="Tooltip_Text_container">
  <span><b>Tooltip headline</b></span>
  <a href="#">
    <span class="tooltips">
        <b>This is&nbsp;</b> a tooltip<br/>
        <b>This is&nbsp;</b> another tooltip<br/>
    </span>
  </a>
  <br/>Move the mousepointer to the tooltip headline above. 
</div>

Rentang pertama untuk teks yang ditampilkan, rentang kedua untuk teks tersembunyi, yang ditampilkan saat Anda mengarahkan kursor ke atasnya.


3

Untuk memperluas jawaban @Andrew Whitaker di atas, Anda dapat mengonversi keterangan alat Anda ke entitas html dalam tag judul untuk menghindari meletakkan html mentah langsung di atribut Anda:

$('div').tooltip({
    content: function () {
        return $(this).prop('title');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="tooltip" title="&lt;div&gt;check out these kool &lt;i&gt;italics&lt;/i&gt; and this &lt;span style=&quot;color:red&quot;&gt;red text&lt;/span&gt;&lt;/div&gt;">Hover Here</div>

Lebih sering daripada tidak, tooltip disimpan dalam variabel php jadi Anda hanya perlu:

<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>

2

Untuk menghindari penempatan tag HTML di atribut judul, solusi lain adalah menggunakan penurunan harga. Misalnya, Anda dapat menggunakan [br] untuk mewakili pemisah baris, kemudian melakukan penggantian sederhana di fungsi konten.

Dalam atribut judul:

"Sample Line 1[br][br]Sample Line 2"

Dalam fungsi konten Anda :

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}

1
$(function () {
         $.widget("ui.tooltip", $.ui.tooltip, {
             options: {
                 content: function () {
                     return $(this).prop('title');
                 }
             }
         });

         $('[rel=tooltip]').tooltip({
             position: {
                 my: "center bottom-20",
                 at: "center top",
                 using: function (position, feedback) {
                     $(this).css(position);
                     $("<div>")
                         .addClass("arrow")
                         .addClass(feedback.vertical)
                         .addClass(feedback.horizontal)
                         .appendTo(this);
                 }
             }
         });
     });

terima kasih atas posting dan solusi di atas.

Saya telah memperbarui kode sedikit. Semoga ini bisa membantu Anda.

http://jsfiddle.net/pragneshkaria/Qv6L2/49/


1

Selama kita menggunakan jQuery (> v1.8), kita bisa mengurai string masuk dengan $ .parseHTML ().

$('.tooltip').tooltip({
    content: function () {
        var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
        return tooltipContent;
    },
}); 

Kami akan mengurai atribut string masuk untuk hal-hal yang tidak menyenangkan, lalu mengonversinya kembali ke HTML yang dapat dibaca jQuery. Keindahan dari hal ini adalah bahwa pada saat mencapai parser, string sudah tergabung, jadi tidak masalah jika seseorang mencoba membagi tag skrip menjadi string terpisah. Jika Anda terjebak menggunakan tooltips jQuery, ini tampaknya menjadi solusi yang solid.



1

Anda dapat mengubah kode sumber 'jquery-ui.js', temukan fungsi default ini untuk mengambil konten atribut judul elemen target.

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

ubah menjadi

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        if($(this).attr('ignoreHtml')==='false'){
            return $(this).prop("title");
        }
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

jadi kapan pun Anda ingin menampilkan tips html, cukup tambahkan atribut ignoreHtml = 'false' pada elemen html target Anda; seperti ini <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>


1

solusi lain adalah mengambil teks di dalam titletag & kemudian menggunakan .html()metode jQuery untuk membuat konten tooltip.

$(function() {
  $(document).tooltip({
    position: {
      using: function(position, feedback) {
        $(this).css(position);
        var txt = $(this).text();
        $(this).html(txt);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });
});

Contoh: http://jsfiddle.net/hamzeen/0qwxfgjo/


1

Tidak ada solusi di atas yang berhasil untuk saya. Yang ini berhasil untuk saya:

$(document).ready(function()
{
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]',
        html: true
     });
});

0

Markup Html

Tool-tip Control dengan kelas ".why", dan Tool-tip Content Area dengan kelas ".customTolltip"

$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });

0

Mengganti \natau yang lolos <br/>melakukan trik sambil mempertahankan sisa HTML yang lolos:

$(document).tooltip({
    content: function() {
        var title = $(this).attr("title") || "";
        return $("<a>").text(title).html().replace(/&lt;br *\/?&gt;/, "<br/>");
    },
});

-1

tambahkan html = true ke opsi tooltip

$({selector}).tooltip({html: true});

Perbarui
itu tidak relevan untuk properti tooltip ui jQuery - itu benar di tooltip ui bootstrap - saya buruk!


1
Maaf, ini tidak berhasil untuk saya. Opsi "html" juga tidak disebutkan dalam dokumentasi resmi.
Wireblue

1
Ini untuk tooltip bootstrap 2.3 bukan tooltip jquery-ui
Maciej Pyszyński

tidak ada prop "html" untuk tooltip
AmirHossein
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.