javascript - container - ¿Puedo usar HTML complejo con la información sobre herramientas de Twitter Bootstrap?
popover form bootstrap 4 (5)
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: "inserta 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?
De forma similar, 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 la información sobre herramientas debe convertirse en elementos DOM. Por defecto, el código HTML se escapó en la información sobre herramientas para evitar ataques XSS. Supongamos que muestra un nombre de usuario en su sitio y muestra una pequeña biografía en una información sobre herramientas. Si el código html no se escapa y el usuario puede editar la biografía por sí mismo, podría inyectar código malicioso.
El atributo de datos html hace exactamente lo que dice que hace en los documentos. Pruebe este pequeño ejemplo, sin JavaScript necesario (dividido en líneas para aclarar):
<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:
Este parámetro se trata simplemente de si va a utilizar HTML complejo en la información sobre herramientas. Configúralo en true y luego presiona el html en el atributo de title de la etiqueta.
Vea here este violín: establecí el atributo html en true a través del data-html="true" en la etiqueta <a> y luego lo agregué en el html ad hoc como ejemplo.
Otra solución para evitar insertar html en data-title es crear div independiente con información sobre herramientas html content, y consultar 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 tantas herramientas como quiera.
demostración en vivo aquí en codepen
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" (no se debe establecer el atributo de título del enlace)
$(''#example1'').tooltip({placement: ''bottom'', title: ''<p class="testtooltip">par</p>'', html: true});