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

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:

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

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/

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

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.

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.

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

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>

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

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.

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

Das Einfügen von HTML in das title-Attribut ist kein gültiges HTML, und wir umgehen es jetzt, um XSS-Schwachstellen zu vermeiden (siehe # 8861 ).

Wenn Sie HTML in Ihren QuickInfos benötigen, verwenden Sie die Inhaltsoption - http://api.jqueryui.com/tooltip/#option-content .

Versuchen Sie, Javascript zu verwenden, um HTML-Tooltips festzulegen (siehe unten)

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

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>

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/

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

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

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

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!