Chú giải công cụ giao diện người dùng jquery không hỗ trợ nội dung html

Hôm nay, tôi đã nâng cấp tất cả các plugin jQuery của mình với jQuery 1.9.1. Và tôi bắt đầu sử dụng chú giải công cụ jQueryUI với jquery.ui.1.10.2. Mọi thứ đã tốt. Nhưng khi tôi sử dụng các thẻ HTML trong nội dung (trong titlethuộc tính của phần tử mà tôi đang áp dụng chú giải công cụ), tôi nhận thấy rằng HTML không được hỗ trợ.

Đây là ảnh chụp màn hình chú giải công cụ của tôi:

Làm cách nào để làm cho nội dung HTML hoạt động với chú giải công cụ jQueryUI trong 1.10.2?

Chỉnh sửa : Vì đây hóa ra là một câu trả lời phổ biến, tôi sẽ thêm tuyên bố từ chối trách nhiệm mà @crush đã đề cập trong nhận xét bên dưới. Nếu bạn sử dụng công việc này xung quanh, hãy lưu ý rằng bạn đang tự mở cho mình một lỗ hổng XSS . Chỉ sử dụng giải pháp này nếu bạn biết mình đang làm gì và có thể chắc chắn về nội dung HTML trong thuộc tính.

Cách dễ nhất để làm điều này là cung cấp một hàm cho contenttùy chọn ghi đè hành vi mặc định:

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

Ví dụ: http://jsfiddle.net/Aa5nK/12/

Một tùy chọn khác sẽ là ghi đè tiện ích chú giải công cụ bằng tiện ích của riêng bạn làm thay đổi contenttùy chọn:

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

Bây giờ, mỗi khi bạn gọi .tooltip, nội dung HTML sẽ được trả về.

Ví dụ: http://jsfiddle.net/Aa5nK/14/

Thay vì điều này:

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

sử dụng cái này để có hiệu suất tốt hơn

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

Tôi đã giải quyết nó bằng thẻ dữ liệu tùy chỉnh, vì dù sao thì thuộc tính tiêu đề là bắt buộc.

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

Như thế này, nó là phù hợp với html và chú giải công cụ chỉ được hiển thị cho các thẻ mong muốn.

Bạn cũng có thể đạt được điều này hoàn toàn mà không cần jQueryUI bằng cách sử dụng các kiểu CSS. Xem đoạn mã dưới đây:

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>

Khoảng đầu tiên dành cho văn bản được hiển thị, khoảng thứ hai dành cho văn bản ẩn, được hiển thị khi bạn di chuột qua nó.

Để mở rộng câu trả lời của @Andrew Whitaker ở trên, bạn có thể chuyển đổi chú giải công cụ của mình thành các thực thể html trong thẻ tiêu đề để tránh đưa html thô trực tiếp vào các thuộc tính của bạn:

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

Thường xuyên hơn không, chú giải công cụ vẫn được lưu trữ trong một biến php, vì vậy bạn chỉ cần:

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

Để tránh đặt các thẻ HTML trong thuộc tính title, một giải pháp khác là sử dụng markdown. Ví dụ: bạn có thể sử dụng [br] để biểu thị dấu ngắt dòng, sau đó thực hiện thay thế đơn giản trong hàm nội dung.

Trong thuộc tính title:

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

Trong chức năng nội dung của bạn :

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

cảm ơn cho bài viết và giải pháp ở trên.

Tôi đã cập nhật mã một chút. Hy vọng điều này có thể giúp bạn.

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

Miễn là chúng ta đang sử dụng jQuery (> v1.8), chúng ta có thể phân tích cú pháp chuỗi đến với $ .parseHTML ().

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

Chúng tôi sẽ phân tích cú pháp thuộc tính của chuỗi đến cho những điều khó chịu, sau đó chuyển đổi nó trở lại thành HTML có thể đọc được của jQuery. Cái hay của điều này là vào thời điểm nó truy cập trình phân tích cú pháp, các chuỗi đã được nối, vì vậy sẽ không có vấn đề gì nếu ai đó đang cố gắng chia thẻ script thành các chuỗi riêng biệt. Nếu bạn đang gặp khó khăn khi sử dụng chú giải công cụ của jQuery, đây có vẻ là một giải pháp tốt.

Từ http://bugs.jqueryui.com/ticket/9019

Đặt HTML trong thuộc tính title không phải là HTML hợp lệ và chúng tôi hiện đang thoát nó để ngăn các lỗ hổng XSS (xem # 8861 ).

Nếu bạn cần HTML trong chú giải công cụ của mình, hãy sử dụng tùy chọn nội dung - http://api.jqueryui.com/tooltip/#option-content .

Hãy thử sử dụng javascript để đặt chú giải công cụ html, xem bên dưới

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

Bạn có thể sửa đổi mã nguồn 'jquery-ui.js', tìm hàm mặc định này để truy xuất nội dung thuộc tính tiêu đề của phần tử đích.

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

thay đổi nó thành

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

do đó, bất cứ khi nào bạn muốn hiển thị các mẹo html, chỉ cần thêm một thuộc tính ignoreHtml = 'false' trên phần tử html mục tiêu của bạn; như thế này <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

một giải pháp khác sẽ là lấy văn bản bên trong titlethẻ và sau đó sử dụng .html()phương thức jQuery để xây dựng nội dung của chú giải công cụ.

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

Ví dụ: http://jsfiddle.net/hamzeen/0qwxfgjo/

Không có giải pháp nào ở trên phù hợp với tôi. Cái này phù hợp với tôi:

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

Đánh dấu html

Tool-tip Control với class ".why" và Tool-tip Content Area với class ".customTolltip"

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

Thay thế \nhoặc mã thoát <br/>thực hiện mẹo trong khi giữ phần còn lại của HTML thoát:

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

thêm html = true vào các tùy chọn chú giải công cụ

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

Cập nhật
nó không liên quan đến thuộc tính chú giải công cụ jQuery ui - nó đúng trong chú giải công cụ bootstrap ui - thật tệ!