Pytanie Etykietka interfejsu Jquery UI nie obsługuje treści HTML


Dzisiaj zaktualizowałem wszystkie moje wtyczki jQuery za pomocą jQuery 1.9.1. I zacząłem używać etykiety jQueryUI z jquery.ui.1.10.2. Wszystko było dobrze. Ale kiedy użyłem znaczników HTML w treści (w title atrybut elementu, do którego używałam podpowiedzi), zauważyłem, że HTML nie jest obsługiwany.

Oto zrzut ekranu mojej podpowiedzi:

enter image description here

Jak mogę sprawić, aby treść HTML działała z etykietą narzędziową jQueryUI w wersji 1.10.2?


76
2018-03-31 20:20


pochodzenie


Czy to coś, co po prostu się zepsuło od czasu aktualizacji? Wydaje się, że działa dobrze dla mnie w jQuery 1.9.1, jQuery UI 1.9.2 jsfiddle.net/2n3DL/1 - metadept
Hmmmm. To dobry pomysł. Czy mogę zadać jeszcze jedno pytanie, jeśli mi pozwolisz. OK, mam ikonę podpowiedzi i ma ona klasę o nazwie "tooltip": <img src = "images / info.png" class = "tooltip" title = "Niektóre <b> świetne </ b> HTML tekst podpowiedzi! "> Jak mogę tego użyć? Z poważaniem. - Colin Henricks
zobacz metadepsy zaktualizowane skrzypce z jquery ui 1.10.2 tutaj i jquery 1.9.1. To nadal działa. - SachinGutte
@phobos: Nie, nie ma. Tam są <b></b> znaczniki w podpowiedzi. - Andrew Whitaker
Najedź kursorem na "Niektóre dane wejściowe" (Etykieta narzędzia bezpośrednio zwracająca treść HTML działa poprawnie). Wiem, że pytanie OP jest niejasne, ale zakładam, że on lub ona używa HTML w title atrybut, który nie jest obsługiwany od wersji 1.10. - Andrew Whitaker


Odpowiedzi:


Edytować: Odkąd to okazało się popularną odpowiedzią, dodaję to zastrzeżenie @zmiażdżyć wymienione w komentarzu poniżej. Jeśli używasz tej pracy, pamiętaj, że otwierasz się na lukę XSS. Korzystaj z tego rozwiązania tylko Ty wiesz, co robisz i może być pewny zawartości HTML w atrybucie.


Najprostszym sposobem na to jest dostarczenie funkcji do content opcja, która zastępuje 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łasną, która zmienia content opcja:

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

Teraz za każdym razem, gdy dzwonisz .tooltip, Treść HTML zostanie zwrócona.

Przykład:  http://jsfiddle.net/Aa5nK/14/


171
2018-03-31 20:53



Szczególnie, dziękuję bardzo za twój komentarz. - Colin Henricks
Dziękuję Ci bardzo. - strongBAD
Jedynym problemem jest to, że omija to powód, dla którego jQuery zaczął uciekać od HTMLa w atrybucie tytułu. - crush
@crush, jaki byłby to powód? Tylko dla potomności ... - eidylon
@eidylon 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ć HTML, który jest nieprawidłowy. - crush


Rozwiązałem go za pomocą niestandardowego tagu danych, ponieważ mimo wszystko wymagany jest atrybut title.

$("[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 etykiety narzędzi są wyświetlane tylko dla pożądanych tagów.


12
2018-04-13 16:08



+1 za niezłamanie istniejącego atrybutu tytułu. - Heinzi


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

12
2018-05-20 04:13



Ta odpowiedź powinna być zaakceptowana. - julien


Możesz także osiągnąć to całkowicie bez jQueryUI, używając stylów CSS. Zobacz poniższy fragment:

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>

Pierwszy zakres dotyczy wyświetlanego tekstu, drugiego zakresu ukrytego tekstu, który jest wyświetlany po najechaniu na niego kursorem myszy.


4
2018-02-24 12:00





Aby uniknąć umieszczania znaczników HTML w atrybucie title, innym rozwiązaniem jest użycie markdown. Na przykład można użyć [br] do przedstawienia podziału linii, a następnie wykonać prostą zamianę w funkcji zawartości.

W atrybucie title:

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

W Twoim funkcja zawartości:

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

2
2018-04-17 23:41





Aby rozwinąć powyższą odpowiedź @Andrew Whitaker, możesz przekonwertować swoją etykietkę narzędziową na encje html w tagu title, aby uniknąć umieszczania surowego 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="&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>

Często jednak podpowiedź jest przechowywana w zmiennej php, więc potrzebujesz tylko:

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

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/


1
2017-08-06 12:16





Dopóki używamy jQuery (> v1.8), możemy przeanalizować przychodzący łańcuch za pomocą $ .parseHTML ().

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

Przetworzymy atrybut przychodzącego ciągu dla nieprzyjemnych rzeczy, a następnie skonwertujemy go z powrotem do formatu HTML, który można odczytać w jQuery. Piękno tego polega na tym, że zanim trafi do parsera, łańcuchy już się łączą, więc nie ma znaczenia, czy ktoś próbuje podzielić znacznik skryptu na osobne ciągi. Jeśli utknąłeś za pomocą podpowiedzi jQuery, wydaje się, że to solidne rozwiązanie.


1
2018-01-15 09:45





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

Umieszczenie kodu HTML w atrybucie title nie jest prawidłowym kodem HTML, a my jesteśmy   teraz unikając tego, aby zapobiec lukom XSS (patrz # 8861).

Jeśli potrzebujesz HTML-a w etykietkach narzędzi, skorzystaj z opcji treści -    http://api.jqueryui.com/tooltip/#option-content.

Spróbuj użyć javascript do ustawienia etykiet html, patrz poniżej

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

1
2018-03-09 12:15





Możesz zmodyfikować kod źródłowy "jquery-ui.js", znaleźć tę domyślną funkcję do pobierania zawartości tytułowego 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();
    },

w ten sposób, gdy chcesz wyświetlać wskazówki html, po prostu dodaj atrybut ignoreHtml = "false" na docelowym elemencie html; lubię to <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>


1
2018-03-16 02:28