Dzisiaj zaktualizowałem wszystkie moje wtyczki jQuery za pomocą jQuery 1.9.1. Zacząłem używać podpowiedzi jQueryUI z jquery.ui.1.10.2. Wszystko było dobrze. Ale kiedy użyłem tagów HTML w treści (w title
atrybucie elementu, do którego stosowałem etykietkę), zauważyłem, że HTML nie jest obsługiwany.
To jest zrzut ekranu mojej podpowiedzi:
Jak sprawić, by zawartość HTML działała z etykietą narzędzia jQueryUI w wersji 1.10.2?
jquery
html
jquery-ui
jquery-ui-tooltip
Andrew Whitaker
źródło
źródło
<b></b>
podpowiedzi znajdują się tagi.title
atrybucie, który nie jest obsługiwany od 1.10.Odpowiedzi:
Edycja : Ponieważ ta odpowiedź okazała się popularna, dodaję zastrzeżenie, o którym @crush wspomniał w komentarzu poniżej. Jeśli używasz tego obejścia, pamiętaj, że otwierasz się na lukę w zabezpieczeniach XSS . Korzystaj z tego rozwiązania tylko wtedy, gdy wiesz, co robisz i możesz mieć pewność co do zawartości HTML w atrybucie.
Najłatwiejszym sposobem na to jest dostarczenie funkcji do
content
opcji, która przesłania domyślne zachowanie:$(function () { $(document).tooltip({ content: function () { return $(this).prop('title'); } }); });
Przykład: http://jsfiddle.net/Aa5nK/12/
Inną opcją byłoby zastąpienie widgetu podpowiedzi własnym, co zmienia
content
opcję:$.widget("ui.tooltip", $.ui.tooltip, { options: { content: function () { return $(this).prop('title'); } } });
Teraz za każdym razem, gdy zadzwonisz
.tooltip
, zostanie zwrócona zawartość HTML.Przykład: http://jsfiddle.net/Aa5nK/14/
źródło
Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities
. W odpowiedzi Andrzeja tytuł nadal musi zawierać kod HTML, który jest nieprawidłowy.Zamiast tego:
$(document).tooltip({ content: function () { return $(this).prop('title'); } });
użyj tego dla lepszej wydajności
$(selector).tooltip({ content: function () { return this.getAttribute("title"); }, });
źródło
Rozwiązałem to za pomocą niestandardowego znacznika danych, ponieważ i tak jest wymagany atrybut tytuł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"); } });
W ten sposób jest zgodny z HTML, a podpowiedzi są wyświetlane tylko dla poszukiwanych tagów.
źródło
Możesz to również osiągnąć całkowicie bez jQueryUI, używając stylów CSS. Zobacz fragment poniżej:
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 </b> a tooltip<br/> <b>This is </b> another tooltip<br/> </span> </a> <br/>Move the mousepointer to the tooltip headline above. </div>
Pierwszy zakres dotyczy wyświetlanego tekstu, a drugi zakresu tekstu ukrytego, który jest pokazywany po najechaniu na niego kursorem.
źródło
Aby rozwinąć powyższą odpowiedź @Andrew Whitaker, możesz przekonwertować podpowiedź na elementy HTML w tagu tytułu, aby uniknąć umieszczania surowego kodu HTML bezpośrednio w atrybutach:
$('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="<div>check out these kool <i>italics</i> and this <span style="color:red">red text</span></div>">Hover Here</div>
Najczęściej podpowiedź jest przechowywana w zmiennej php, więc potrzebujesz tylko:
<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
źródło
Aby uniknąć umieszczania tagów HTML w atrybucie tytułu, innym rozwiązaniem jest użycie przeceny. Na przykład możesz użyć [br] do oznaczenia końca wiersza, a następnie wykonać prostą zamianę w funkcji zawartości.
W atrybucie tytułu:
"Sample Line 1[br][br]Sample Line 2"
W funkcji treści :
content: function () { return $(this).attr('title').replace(/\[br\]/g,"<br />"); }
źródło
$(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); } } }); });
dzięki za post i rozwiązanie powyżej.
Zaktualizowałem trochę kod. Mam nadzieję, że to może ci pomóc.
http://jsfiddle.net/pragneshkaria/Qv6L2/49/
źródło
Tak długo, jak używamy jQuery (> v1.8), możemy przeanalizować przychodzący ciąg za pomocą $ .parseHTML ().
$('.tooltip').tooltip({ content: function () { var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) ); return tooltipContent; }, });
Przeanalizujemy atrybut ciągu przychodzącego pod kątem nieprzyjemnych rzeczy, a następnie przekonwertujemy go z powrotem na HTML czytelny dla jQuery. Piękno tego polega na tym, że zanim trafi do parsera, łańcuchy są już konkatenowane, więc nie ma znaczenia, czy ktoś próbuje podzielić tag skryptu na oddzielne ciągi. Jeśli utkniesz przy użyciu podpowiedzi jQuery, wydaje się to być solidnym rozwiązaniem.
źródło
Od http://bugs.jqueryui.com/ticket/9019
Spróbuj użyć javascript, aby ustawić podpowiedzi HTML, patrz poniżej
$( ".selector" ).tooltip({ content: "Here is your HTML" });
źródło
Możesz zmodyfikować kod źródłowy „jquery-ui.js”, znajdź tę domyślną funkcję do pobierania zawartości atrybutu tytułu elementu docelowego.
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(); },
zmień to na
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(); },
tak więc za każdym razem, gdy chcesz wyświetlać wskazówki HTML, po prostu dodaj atrybut ignoreHtml = 'false' do docelowego elementu html; lubię to
<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>
źródło
innym rozwiązaniem będzie pobranie tekstu wewnątrz
title
tagu, a następnie użycie.html()
metody jQuery do skonstruowania zawartości podpowiedzi.$(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); } } }); });
Przykład: http://jsfiddle.net/hamzeen/0qwxfgjo/
źródło
Żadne z powyższych rozwiązań nie zadziałało. Ten działa dla mnie:
$(document).ready(function() { $('body').tooltip({ selector: '[data-toggle="tooltip"]', html: true }); });
źródło
Znaczniki HTML
Element sterujący etykietą narzędzia z klasą „.why” i Obszar zawartości wskazówki narzędzia z klasą „.customTolltip”
$(function () { $('.why').attr('title', function () { return $(this).next('.customTolltip').remove().html(); }); $(document).tooltip(); });
źródło
Zastąpienie
\n
lub uciekającego<br/>
załatwia sprawę, zachowując resztę kodu HTML przed ucieczką:$(document).tooltip({ content: function() { var title = $(this).attr("title") || ""; return $("<a>").text(title).html().replace(/<br *\/?>/, "<br/>"); }, });
źródło
dodaj html = true do opcji podpowiedzi
$({selector}).tooltip({html: true});
Aktualizacja
nie ma znaczenia dla właściwości podpowiedzi interfejsu użytkownika jQuery - to prawda w podpowiedziach interfejsu bootstrap - moja wina!
źródło