La información sobre herramientas de Jquery UI no admite contenido html

Hoy, actualicé todos mis complementos de jQuery con jQuery 1.9.1. Y comencé a usar la información sobre herramientas de jQueryUI con jquery.ui.1.10.2. Todo era bueno. Pero cuando usé etiquetas HTML en el contenido (en el titleatributo del elemento al que estaba aplicando la información sobre herramientas), noté que HTML no es compatible.

Esta es una captura de pantalla de mi información sobre herramientas:

¿Cómo puedo hacer que el contenido HTML funcione con la información sobre herramientas de jQueryUI en 1.10.2?

Editar : dado que esta resultó ser una respuesta popular, agrego el descargo de responsabilidad que @crush mencionó en un comentario a continuación. Si usa esta solución alternativa, tenga en cuenta que se está abriendo a una vulnerabilidad XSS . Utilice esta solución solo si sabe lo que está haciendo y puede estar seguro del contenido HTML del atributo.

La forma más sencilla de hacer esto es proporcionar una función a la contentopción que anule el comportamiento predeterminado:

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

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

Otra opción sería anular el widget de información sobre herramientas con el suyo que cambia la contentopción:

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

Ahora, cada vez que llame .tooltip, se devolverá contenido HTML.

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

En lugar de esto:

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

use esto para un mejor rendimiento

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

Lo resolví con una etiqueta de datos personalizada, porque de todos modos se requiere un atributo de título.

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

Así, es compatible con HTML y la información sobre herramientas solo se muestra para las etiquetas deseadas.

También puede lograr esto completamente sin jQueryUI usando estilos CSS. Vea el fragmento a continuación:

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>

El primer intervalo es para el texto mostrado, el segundo intervalo para el texto oculto, que se muestra cuando pasa el cursor sobre él.

Para ampliar la respuesta de @Andrew Whitaker anterior, puede convertir su información sobre herramientas en entidades html dentro de la etiqueta del título para evitar poner html sin procesar directamente en sus atributos:

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

La mayoría de las veces, la información sobre herramientas se almacena en una variable php de todos modos, por lo que solo necesitará:

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

Para evitar colocar etiquetas HTML en el atributo de título, otra solución es usar markdown. Por ejemplo, puede usar [br] para representar un salto de línea y luego realizar un reemplazo simple en la función de contenido.

En el atributo de título:

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

En su función de contenido :

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

gracias por la publicación y la solución anterior.

He actualizado un poco el código. Espero que esto te ayude.

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

Siempre que usemos jQuery (> v1.8), podemos analizar la cadena entrante con $ .parseHTML ().

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

Analizaremos el atributo de la cadena entrante en busca de cosas desagradables, luego lo convertiremos de nuevo a HTML legible por jQuery. La belleza de esto es que cuando llega al analizador, las cadenas ya están concatenadas, por lo que no importa si alguien está tratando de dividir la etiqueta del script en cadenas separadas. Si está atascado con la información sobre herramientas de jQuery, esta parece ser una solución sólida.

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

Poner HTML dentro del atributo de título no es HTML válido y ahora lo estamos escapando para evitar vulnerabilidades XSS (ver # 8861 ).

Si necesita HTML en la información sobre herramientas, utilice la opción de contenido: http://api.jqueryui.com/tooltip/#option-content .

Intente usar javascript para configurar la información sobre herramientas html, ver más abajo

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

Puede modificar el código fuente 'jquery-ui.js', busque esta función predeterminada para recuperar el contenido del atributo de título del elemento de destino.

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

cámbialo a

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

por lo tanto, siempre que desee mostrar sugerencias html, simplemente agregue un atributo ignoreHtml = 'false' en su elemento html de destino; Me gusta esto <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

otra solución será tomar el texto dentro de la titleetiqueta y luego usar el .html()método de jQuery para construir el contenido de la información sobre herramientas.

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

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

Ninguna de las soluciones anteriores funcionó para mí. Esta funciona para mí:

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

Marcado HTML

Control de información sobre herramientas con clase ".why" y Área de contenido de información sobre herramientas con clase ".customTolltip"

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

Reemplazar el \no el escapado <br/>hace el truco mientras se mantiene el resto del HTML escapado:

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

agregue html = true a las opciones de información sobre herramientas

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

La actualización
no es relevante para la propiedad de información sobre herramientas de la interfaz de usuario de jQuery; es cierto en la información sobre herramientas de la interfaz de usuario de bootstrap, ¡mi culpa!