jquery - library - La información sobre herramientas de JTry UI no admite contenido html

tooltip jquery 3

Question

Hoy, actualicé todos mis plugins jQuery con jQuery 1.9.1. Y comencé a usar jQueryUI tooltip con jquery.ui.1.10.2. Todo era bueno. Pero cuando usé etiquetas HTML en el contenido (en el atributo de title 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 jQueryUI tooltip en 1.10.2?

Answer 1

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

Poner HTML dentro del atributo title no es HTML válido y ahora estamos escapándolo para evitar vulnerabilidades XSS (ver #8861 ).

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

Intenta usar javascript para establecer la información sobre herramientas html, mira a continuación

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

Answer 2

En lugar de esto:

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

usa esto para un mejor rendimiento

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

Answer 3

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

De esta manera, es html conformismo y la información sobre herramientas solo se muestra para las etiquetas deseadas.

Answer 4

Otra solución será tomar el texto dentro de la etiqueta del title y luego usar el método .html() 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/

Answer 5

Para ampliar la respuesta de @Andrew Whitaker anterior, puede convertir su información sobre herramientas en entidades html dentro de la etiqueta de 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>

En la mayoría de los casos, la información sobre herramientas se almacena en una variable php de todas formas, por lo que solo necesitarías:

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

Answer 6

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

En el atributo de título:

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

En tu función de contenido :

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

Answer 7

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

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 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, cada vez que desee mostrar sugerencias html, solo agregue un atributo ignoreHtml = ''false'' en su elemento html de destino; como este <td title="<b>display content</b><br/>other" ignoreHtml=''false''>display content</td>

Answer 8

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 para cosas desagradables, luego lo convertiremos de nuevo a HTML legible por jQuery. Lo bueno de esto es que, para cuando llega al analizador, las cadenas ya se concatenan, por lo que no importa si alguien intenta 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.

Answer 9

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 tramo es para el texto mostrado, el segundo tramo para el texto oculto, que se muestra al pasar el puntero sobre él.

Answer 10

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

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

Actualizar
no es relevante para la propiedad jQuery ui tooltip - es cierto en bootstrap ui tooltip - ¡es malo!

Answer 11

Editar : Dado que esta resultó ser una respuesta popular, estoy agregando el descargo de responsabilidad que @crush menciona en un comentario a continuación. Si utiliza este trabajo, tenga en cuenta que se está abriendo a una vulnerabilidad XSS . Solo use esta solución si sabe lo que está haciendo y puede estar seguro del contenido HTML en el atributo.

La forma más sencilla de hacerlo es proporcionar una función a la opción de content que anula 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 tuyo que cambia la opción de content :

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

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

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

Answer 12

$(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 el código poco. Espero que esto te pueda ayudar.

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