Il tooltip dell'interfaccia utente di Jquery non supporta il contenuto html

Oggi, ho aggiornato tutti i miei plug-in jQuery con jQuery 1.9.1. E ho iniziato a utilizzare jQueryUI tooltip con jquery.ui.1.10.2. Andava tutto bene. Ma quando ho utilizzato i tag HTML nel contenuto ( titlenell'attributo dell'elemento a cui stavo applicando il suggerimento), ho notato che l'HTML non è supportato.

Questo è lo screenshot del mio suggerimento:

Come posso far funzionare il contenuto HTML con il tooltip di jQueryUI nella 1.10.2?

Modifica : poiché questa si è rivelata una risposta popolare, aggiungo il disclaimer che @crush ha menzionato in un commento qui sotto. Se usi questa soluzione, tieni presente che ti stai aprendo a una vulnerabilità XSS . Usa questa soluzione solo se sai cosa stai facendo e puoi essere certo del contenuto HTML nell'attributo.

Il modo più semplice per farlo è fornire una funzione contentall'opzione che sovrascrive il comportamento predefinito:

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

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

Un'altra opzione potrebbe essere quella di sovrascrivere il widget del tooltip con il tuo che cambia il file content opzione:

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

Adesso, ogni volta che chiami .tooltip , verrà restituito il contenuto HTML.

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

Invece di questo:

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

usalo per prestazioni migliori

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

L'ho risolto con un tag di dati personalizzato, perché comunque è richiesto un attributo del titolo.

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

In questo modo è conforme a html e i suggerimenti vengono visualizzati solo per i tag desiderati.

Puoi anche ottenere questo completamente senza jQueryUI utilizzando gli stili CSS. Vedi lo snippet di seguito:

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>

Il primo intervallo è per il testo visualizzato, il secondo intervallo per il testo nascosto, che viene mostrato quando ci passi sopra con il mouse.

Per espandere la risposta di @Andrew Whitaker sopra, puoi convertire il tuo suggerimento in entità html all'interno del tag del titolo in modo da evitare di inserire html grezzo direttamente nei tuoi attributi:

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

Il più delle volte, il tooltip è comunque memorizzato in una variabile php, quindi avresti solo bisogno di:

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

Per evitare di inserire tag HTML nell'attributo del titolo, un'altra soluzione è utilizzare il markdown. Ad esempio, potresti usare [br] per rappresentare un'interruzione di riga, quindi eseguire una semplice sostituzione nella funzione di contenuto.

Nell'attributo del titolo:

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

Nella tua funzione di contenuto :

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

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

grazie per il post e la soluzione sopra.

Ho aggiornato un po 'il codice. Spero che questo possa aiutarti.

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

Finché utilizziamo jQuery (> v1.8), possiamo analizzare la stringa in arrivo con $ .parseHTML ().

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

Analizzeremo l'attributo della stringa in arrivo per cose spiacevoli, quindi lo convertiremo di nuovo in HTML leggibile da jQuery. Il bello di questo è che nel momento in cui colpisce il parser le stringhe sono già concatenate, quindi non importa se qualcuno sta cercando di dividere il tag dello script in stringhe separate. Se sei bloccato usando i suggerimenti di jQuery, questa sembra essere una soluzione solida.

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

L'inserimento di HTML nell'attributo title non è un HTML valido e ora stiamo eseguendo l'escape per prevenire le vulnerabilità XSS (vedere # 8861 ).

Se hai bisogno di HTML nei tuoi suggerimenti, usa l'opzione contenuto - http://api.jqueryui.com/tooltip/#option-content .

Prova a usare javascript per impostare i tooltip html, vedi sotto

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

È possibile modificare il codice sorgente "jquery-ui.js", trovare questa funzione predefinita per recuperare il contenuto dell'attributo del titolo dell'elemento di destinazione.

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

cambiarlo in

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

quindi ogni volta che vuoi visualizzare suggerimenti html, aggiungi semplicemente un attributo ignoreHtml = 'false' sul tuo elemento html di destinazione; come questo <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

un'altra soluzione sarà prendere il testo all'interno del titletag e quindi utilizzare il .html()metodo di jQuery per costruire il contenuto del suggerimento.

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

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

Nessuna delle soluzioni sopra ha funzionato per me. Questo funziona per me:

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

Markup HTML

Controllo della descrizione comando con la classe ".why" e Area dei contenuti della descrizione comando con la classe ".customTolltip"

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

La sostituzione di \no dell'escaped <br/>fa il trucco mantenendo il resto del codice HTML con escape:

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

aggiungi html = true alle opzioni del tooltip

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

L'aggiornamento
non è rilevante per la proprietà tooltip dell'interfaccia utente jQuery - è vero nel tooltip dell'interfaccia utente bootstrap - male!