Câu hỏi 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 trình cắm thêm jQuery của mình bằng jQuery 1.9.1. Và tôi bắt đầu sử dụng tooltip jQueryUI với jquery.ui.1.10.2. Mọi thứ đã tốt. Nhưng khi tôi sử dụng thẻ HTML trong nội dung (trong title thuộc tính của phần tử mà tôi đã áp dụng chú giải công cụ vào), tôi nhận thấy rằng HTML không được hỗ trợ.

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

enter image description here

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


76
2018-03-31 20:20


gốc


Đây có phải là cái gì đó vừa bị phá vỡ kể từ khi bạn nâng cấp? Nó có vẻ làm việc tốt cho tôi trong jQuery 1.9.1, jQuery UI 1.9.2 jsfiddle.net/2n3DL/1 - metadept
Hımm.It là ý tưởng hay. Tôi có thể hỏi thêm một câu nếu bạn cho tôi. Ok, tôi có biểu tượng chú giải công cụ và có một lớp có tên là "tooltip" như sau: <img src = "images / info.png" class = "tooltip" title = "Một số <b> tuyệt vời </ b> HTML tooltip text! "> Làm thế nào tôi có thể sử dụng như thế này? Trân trọng. - Colin Henricks
xem phần cập nhật fad với jquery ui 1.10.2 đây và jquery 1.9.1. Nó vẫn làm việc. - SachinGutte
@ phobos: Không, nó không. Có <b></b> thẻ ngay trong chú giải công cụ. - Andrew Whitaker
Di chuột qua "Một số đầu vào" (Chú giải công cụ trả về trực tiếp nội dung HTML hoạt động tốt). Tôi biết câu hỏi của OP là không rõ ràng, nhưng tôi cho rằng họ đang sử dụng HTML trong title thuộc tính, không được hỗ trợ là 1,10. - Andrew Whitaker


Các câu trả lời:


Chỉnh sửa: Vì đây là câu trả lời phổ biến, tôi thêm tuyên bố từ chối trách nhiệm @nghiền nát được đề cập trong một bình luận dưới đây. Nếu bạn sử dụng công việc này xung quanh, lưu ý rằng bạn đang tự mở cho một lỗ hổng XSS. Chỉ sử dụng giải pháp này nếu bạn biết bạn đang làm gì và có thể được chắc chắn của 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 content tùy chọn ghi đè hành vi mặc định:

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

Thí 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 công cụ của riêng bạn mà thay đổi content Tù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ả lại.

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


171
2018-03-31 20:53



Đặc biệt, cảm ơn bạn rất nhiều vì đã bình luận đúng. - Colin Henricks
Cảm ơn nhiều. - strongBAD
Vấn đề duy nhất với điều này là nó phá vỡ chính lý do mà jQuery bắt đầu thoát HTML trong thuộc tính title để bắt đầu. - crush
@crush lý do đó sẽ là gì? Chỉ vì hậu thế ... - eidylon
@eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities. Trong câu trả lời của Andrew, tiêu đề vẫn phải chứa HTML, không hợp lệ. - crush


Tôi đã giải quyết nó bằng thẻ dữ liệu tùy chỉnh, bởi vì bất kỳ thuộc tính tiêu đề nào cũng được yêu cầu.

$("[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 là html phù hợp và chú giải công cụ chỉ được hiển thị cho các thẻ mong muốn.


12
2018-04-13 16:08



1 vì không vi phạm thuộc tính tiêu đề hiện tại. - Heinzi


Thay vì điều này:

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

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

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

12
2018-05-20 04:13



Câu trả lời này phải là câu trả lời được chấp nhận. - julien


Bạn cũng có thể đạt được điều này hoàn toàn không có jQueryUI bằng cách sử dụng các kiểu CSS. Xem đoạn 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 là cho văn bản được hiển thị, khoảng thứ hai cho văn bản ẩn, được hiển thị khi bạn di chuột qua nó.


4
2018-02-24 12:00





Để 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 diễn 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 tiêu đề:

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

Trong của bạn hàm nội dung:

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

2
2018-04-17 23:41





Để 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 bạn thành các thực thể html trong thẻ tiêu đề để tránh đưa html thô trực tiếp vào 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ụ được lưu trữ trong một biến php anyway, do đó bạn chỉ cần:

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

2
2017-10-30 12:31





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


1
2017-08-06 12:16