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


86

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:

ingrese la descripción de la imagen aquí

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


1
¿Es esto algo que acaba de romperse desde que actualizó? Parece que me funciona bien en jQuery 1.9.1, jQuery UI 1.9.2 jsfiddle.net/2n3DL/1
metadept

Hımm, es una buena idea. ¿Puedo hacer una pregunta más si me dejas? Ok, tengo un icono de información sobre herramientas y tiene una clase llamada "información sobre herramientas" como esta: <img src = "images / info.png" class = "tooltip" title = "Algunos <b> excelentes </b> HTML texto de información sobre herramientas! "> ¿Cómo puedo usar esto? Atentamente.

ver metadepts actualizado violín con jquery ui 1.10.2 aquí y jquery 1.9.1. Aún funciona.
SachinGutte

@phobos: No, no es así. Hay <b></b>etiquetas en la descripción emergente.
Andrew Whitaker

1
Coloca el cursor sobre "Algunas entradas" (la información sobre herramientas que devuelve directamente el contenido HTML funciona bien). Sé que la pregunta del OP no está clara, pero supongo que está usando HTML en el titleatributo, que no es compatible a partir de la versión 1.10.
Andrew Whitaker

Respuestas:


186

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/


4
El único problema con esto es que elude la razón por la que jQuery comenzó a escapar de HTML en el atributo de título para empezar.
aplastar

4
@eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities. En la respuesta de Andrew, el título aún debe contener HTML, que no es válido.
aplastar

Puede tener la parte de texto del contenido en el atributo de título y luego construir los bits circundantes de HTML en su devolución de llamada de contenido para evitar esto (siempre y cuando sepa cuál sería en el momento de inicio)
jinglesthula

18

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

sí, mejor rendimiento, porque solo tengo algunos elementos con información sobre herramientas
datdinhquoc

Funciona perfectamente
Helpha

14

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.


5

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.


4

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>

2

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

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

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/


1

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.


1

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

1

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>


1

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/


1

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

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

0

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

0

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

-1

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!


1
Lo siento, esto no funcionó para mí. Tampoco se menciona la opción "html" en la documentación oficial.
Wireblue

1
Esto es para bootstrap 2.3 tooltip no jquery-ui tooltip
Maciej Pyszyński

no hay prop "html" para la información sobre herramientas
AmirHossein
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.