Tooltip UI Jquery tidak mendukung konten html

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:

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

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/

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");
    },
});

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.

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.

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>

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 />");
}

$(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/

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.

Dari http://bugs.jqueryui.com/ticket/9019

Menempatkan HTML dalam atribut judul bukanlah HTML yang valid dan kami sekarang keluar untuk mencegah kerentanan XSS (lihat # 8861 ).

Jika Anda membutuhkan HTML di tooltips Anda, gunakan opsi konten - http://api.jqueryui.com/tooltip/#option-content .

Coba gunakan javascript untuk menyetel html tooltips, lihat di bawah

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});

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>

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/

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
     });
});

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();
            });

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/>");
    },
});

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!