Der Tooltip für die Jquery-Benutzeroberfläche unterstützt keine HTML-Inhalte

86

Heute habe ich alle meine jQuery-Plug-Ins mit jQuery 1.9.1 aktualisiert. Und ich fing an, den jQueryUI-Tooltip mit jquery.ui.1.10.2 zu verwenden. Alles war gut. Aber als ich HTML-Tags im Inhalt verwendet habe (in dertitle Attribut des Elements, auf das ich den Tooltip angewendet habe), stellte ich fest, dass HTML nicht unterstützt wird.

Dies ist ein Screenshot meines Tooltips:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich HTML-Inhalte mit dem jQueryUI-Tooltip in 1.10.2 zum Laufen bringen?

Andrew Whitaker
quelle
1
Ist das etwas, das gerade kaputt gegangen ist, seit Sie ein Upgrade durchgeführt haben? Es scheint gut für mich in jQuery 1.9.1, jQuery UI 1.9.2 jsfiddle.net/2n3DL/1
Metadept
Hımm.Es ist eine gute Idee. Kann ich noch eine Frage stellen, wenn Sie mich lassen. Ok, ich habe ein Tooltip-Symbol und es hat eine Klasse mit dem Namen "Tooltip" wie folgt: <img src = "images / info.png" class = "tooltip" title = "Einige <b> großartige </ b> HTML-Code Tooltip-Text! "> Wie kann ich so verwenden? Freundliche Grüße.
siehe metadepts aktualisierte Geige mit jquery ui 1.10.2 hier und jquery 1.9.1. Es funktioniert noch.
SachinGutte
@phobos: Nein, das tut es nicht. Es gibt <b></b>Tags direkt im Tooltip.
Andrew Whitaker
1
Bewegen Sie den Mauszeiger über "Einige Eingaben" (Der Tooltip, der HTML-Inhalte direkt zurückgibt, funktioniert einwandfrei). Ich weiß, dass die Frage des OP etwas unklar ist, aber ich gehe davon aus, dass er oder sie HTML in dem titleAttribut verwendet, das ab 1.10 nicht mehr unterstützt wird.
Andrew Whitaker

Antworten:

185

Bearbeiten : Da sich herausstellte, dass dies eine beliebte Antwort war, füge ich den Haftungsausschluss hinzu, den @crush in einem Kommentar unten erwähnt hat. Wenn Sie diese Problemumgehung verwenden, beachten Sie, dass Sie sich für eine XSS-Sicherheitsanfälligkeit öffnen . Verwenden Sie diese Lösung nur, wenn Sie wissen, was Sie tun, und sich des HTML-Inhalts im Attribut sicher sein können .


Der einfachste Weg, dies zu tun, besteht darin, der contentOption eine Funktion bereitzustellen, die das Standardverhalten überschreibt:

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

Beispiel: http://jsfiddle.net/Aa5nK/12/

Eine andere Möglichkeit wäre, das Tooltip-Widget mit Ihrem eigenen zu überschreiben, das das ändert content Option :

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

Jetzt jedes Mal, wenn Sie anrufen .tooltip HTML-Inhalt zurückgegeben.

Beispiel: http://jsfiddle.net/Aa5nK/14/

Andrew Whitaker
quelle
3
Das einzige Problem dabei ist, dass es den Grund umgeht, warum jQuery anfing, HTML im title-Attribut zu entkommen.
Crush
4
@ Eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities. In Andrews Antwort muss der Titel noch HTML enthalten, was ungültig ist.
Crush
Sie könnten den Textteil des Inhalts im title-Attribut haben und dann die umgebenden HTML-Teile in Ihrem Inhaltsrückruf erstellen, um dies zu
umgehen
18

An Stelle von:

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

Verwenden Sie dies für eine bessere Leistung

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});
Profesor08
quelle
Ja, bessere Leistung, weil ich nur ein paar Elemente mit Tooltips habe
datdinhquoc
Funktioniert perfekt
Helpha
14

Ich habe es mit einem benutzerdefinierten Daten-Tag gelöst, da ohnehin ein title-Attribut erforderlich ist.

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

So ist es HTML-konform und die Tooltips werden nur für gewünschte Tags angezeigt.

Chris
quelle
5

Sie können dies auch vollständig ohne jQueryUI erreichen, indem Sie CSS-Stile verwenden. Siehe den folgenden Ausschnitt:

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>

Der erste Bereich ist für den angezeigten Text, der zweite Bereich für den ausgeblendeten Text, der angezeigt wird, wenn Sie den Mauszeiger darüber halten.

Matt
quelle
2

Um zu vermeiden, dass HTML-Tags in das title-Attribut eingefügt werden, besteht eine andere Lösung darin, Markdown zu verwenden. Sie können beispielsweise [br] verwenden, um einen Zeilenumbruch darzustellen, und dann ein einfaches Ersetzen in der Inhaltsfunktion durchführen.

Im Titelattribut:

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

In Ihrer Inhaltsfunktion :

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

Um die Antwort von @Andrew Whitaker oben zu erweitern, können Sie Ihren Tooltip in HTML-Entitäten innerhalb des Titel-Tags konvertieren, um zu vermeiden, dass rohes HTML direkt in Ihre Attribute eingefügt wird:

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

Meistens wird der Tooltip ohnehin in einer PHP-Variablen gespeichert, sodass Sie nur Folgendes benötigen:

<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
Billynoah
quelle
1
$(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);
                 }
             }
         });
     });

danke für post und lösung oben.

Ich habe den Code ein wenig aktualisiert. Hoffe das könnte dir helfen.

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

Pragnesh Karia
quelle
1

Solange wir jQuery (> v1.8) verwenden, können wir die eingehende Zeichenfolge mit $ .parseHTML () analysieren.

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

Wir analysieren das Attribut des eingehenden Strings auf unangenehme Dinge und konvertieren es dann wieder in jQuery-lesbares HTML. Das Schöne daran ist, dass die Zeichenfolgen zu dem Zeitpunkt, zu dem sie auf den Parser treffen, bereits verkettet sind. Es spielt also keine Rolle, ob jemand versucht, das Skript-Tag in separate Zeichenfolgen aufzuteilen. Wenn Sie mit den Tooltips von jQuery nicht weiterkommen, scheint dies eine solide Lösung zu sein.

Ghettosoak
quelle
1

Sie können den Quellcode 'jquery-ui.js' ändern und diese Standardfunktion zum Abrufen des Titelattributinhalts des Zielelements finden.

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

ändere es auf

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

Wenn Sie also HTML-Tipps anzeigen möchten, fügen Sie einfach ein Attribut ignoreHtml = 'false' zu Ihrem Ziel-HTML-Element hinzu. so was <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

Joker
quelle
1

Eine andere Lösung besteht darin, den Text innerhalb des titleTags zu erfassen und dann die .html()Methode von jQuery zu verwenden, um den Inhalt des Tooltips zu erstellen.

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

Beispiel: http://jsfiddle.net/hamzeen/0qwxfgjo/

Hamzeen Hameem
quelle
1

Keine der oben genannten Lösungen hat bei mir funktioniert. Dieser funktioniert für mich:

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

HTML-Markup

Tooltip-Steuerung mit der Klasse ".why" und Tooltip-Inhaltsbereich mit der Klasse ".customTolltip"

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

Das Ersetzen des \noder des Escaped <br/>macht den Trick, während der Rest des HTML- Codes maskiert bleibt:

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

Fügen Sie den Tooltip-Optionen html = true hinzu

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

Update
ist nicht relevant für die jQuery UI Tooltip-Eigenschaft - es ist wahr in Bootstrap UI Tooltip - mein schlechtes!

user2258511
quelle
1
Entschuldigung, das hat bei mir nicht funktioniert. Es gibt auch keine Erwähnung einer "HTML" -Option in der offiziellen Dokumentation.
Wireblue
1
Dies ist für Bootstrap 2.3 Tooltip nicht jquery-ui Tooltip
Maciej Pyszyński
Es gibt keine Requisite "HTML" für Tooltip
AmirHossein