Puis-je utiliser du HTML complexe avec l'infobulle de Twitter Bootstrap ?

Question

Si je vérifie documentation officielle je peux voir une propriété appelée 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.

Il est écrit "insérer du html dans l'infobulle", mais le type est booléen. Comment puis-je utiliser du html complexe dans une infobulle ?

Answer 1

Ce paramètre permet de savoir si vous allez utiliser du html complexe dans l'infobulle. Définissez-le à true puis tapez le html dans le title de la balise.

Voir ce violon aquí - J'ai mis l'attribut html à true par le biais de la fonction data-html="true" dans le <a> et j'ai ajouté le html ad hoc à titre d'exemple.

Answer 2

Une autre solution pour éviter d'insérer du html dans données-titre est de créer une div indépendante avec le contenu html de l'infobulle, et de faire référence à cette div lors de la création de l'infobulle :

<!-- 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 cette façon, vous pouvez créer un contenu html lisible et complexe, et activer autant d'infobulles que vous le souhaitez.

Démonstration en direct ici sur codepen

Answer 3

Comme d'habitude, en utilisant data-original-title :

Html :

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

Javascript :

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

Le paramètre html indique comment le texte de l'infobulle doit être transformé en éléments DOM. Par défaut, le code Html est échappé dans les infobulles pour éviter les attaques XSS. Imaginons que vous affichez un nom d'utilisateur sur votre site et que vous montriez une petite biographie dans une infobulle. Si le code html n'est pas échappé et que l'utilisateur peut modifier la biographie lui-même, il pourrait injecter un code malveillant.

Answer 4

El html L'attribut data fait exactement ce qu'il indique dans la documentation. Essayez ce petit exemple, sans JavaScript (décomposé en lignes pour plus de clarté) :

<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>

Démonstrations de JSFiddle :

• Bootstrap 2.x
• Bootstrap 3.x

Answer 5

Mettez l'option "html" à true si vous voulez avoir du html dans le tooltip. Le html réel est déterminé par l'option "title" (l'attribut "title" du lien ne doit pas être défini).

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

Echantillon en direct