¿Puedo usar HTML complejo con la información sobre herramientas de Twitter Bootstrap?

143

Si reviso la documentación oficial , puedo ver una propiedad llamada HTML:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

Dice "inserte html en la información sobre herramientas", pero el tipo es booleano. ¿Cómo puedo usar html complejo dentro de una información sobre herramientas?

javascript html twitter-bootstrap-3 tooltip sergserg
fuente

Respuestas:

256

Este parámetro es solo acerca de si va a utilizar html complejo en la información sobre herramientas. Configúrelo truey luego presione el html en el titleatributo de la etiqueta.

Vea este violín aquí : configuré el atributo html como verdadero a través data-html="true"de la <a>etiqueta y luego agregué el html ad hoc como ejemplo.

George Wilson
fuente
3
Bueno, su documentación no es tan clara en esa área. Gracias por compartir esta respuesta! :)
sergserg
3
La documentación de bootstrap es notoriamente basura :) ¡Me alegra poder aclarar las cosas!
George Wilson
66
El ejemplo de violín no funciona para mí. Todavía veo el código HTML sin procesar.
Sonson123
3
Probablemente algún cambio en el código Bootstrap como sospechas. Antes de tener todas mis informaciones sobre herramientas conectadas para títulos html usando {html: true} en los atributos de la función, pero pasando de 2.2.2> 2.3.1, tuve que agregar data-html = "true" a mis elementos y simplemente descarté {html: true} parte. Realmente desearía que intentaran hacer las cosas bien más a menudo la primera vez y no infligir cambios de última hora constantemente entre lanzamientos.
Andrew Swihart
1
Ver aquí: jsfiddle.net/44khF/148 . Además, solo parece funcionar con el atributo de datos y no usar html: true en la inicialización si se usan delegados.
ptutt
34

Igual de normal, usando data-original-title:

HTML:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

Javascript:

$("[rel=tooltip]").tooltip({html:true});

El parámetro html especifica cómo el texto de información sobre herramientas debe convertirse en elementos DOM. De forma predeterminada, el código HTML se escapa en la información sobre herramientas para evitar ataques XSS. Digamos que muestra un nombre de usuario en su sitio y muestra una pequeña biografía en una información sobre herramientas. Si no se escapa el código html y el usuario puede editar la biografía por sí mismo, podría inyectar código malicioso.

Matt Zeunert
fuente
55
data-original-titlees donde bootstrap almacena temporalmente titlesi está presente. data-titlees suficiente si no tienes un título, como un<a href="#" title="xxx">
davidkonrad
eso es genial y simple
Gayan
Hola @MattZeunert Lo he usado y lo estoy ejecutando perfectamente bien, pero quiero actualizar el título según mis datos próximos sin volver a cargar la página y configurarlo dinámicamente, me refiero a cambiar el contenido dentro del título.
3 reglas
32

Otra solución para evitar insertar html en data-title es crear un div independiente con contenido html de información sobre herramientas, y consulte este div al crear su información sobre herramientas:

<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>

<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
    <h2>Tip title</h2>
    <p>This is my tip content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

De esta forma, puede crear contenido html legible complejo y activar la información sobre herramientas que desee.

demostración en vivo aquí en codepen

migli
fuente
Fantástico. Estoy muy contento de que alguien haya propuesto una solución que no está metiendo HTML directamente en la propiedad de datos.
Mir
27

El htmlatributo de datos hace exactamente lo que dice que hace en los documentos. Pruebe este pequeño ejemplo, no necesita JavaScript (dividido en líneas para aclararlo):

<span rel="tooltip" 
     data-toggle="tooltip" 
     data-html="true" 
     data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>


Demos de JSFiddle:

davidkonrad
fuente
7

establezca la opción "html" en true si desea tener html en la información sobre herramientas. El html real está determinado por la opción "título" (el atributo de título del enlace no debe establecerse)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Muestra en vivo

Andriy F.
fuente