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

143

Si je vérifie la 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 dit: "insérer du HTML dans l'info-bulle", mais le type est booléen. Comment puis-je utiliser du HTML complexe dans une info-bulle?

javascript html twitter-bootstrap-3 tooltip sergserg
la source

Réponses:

256

Ce paramètre indique simplement si vous allez utiliser du code HTML complexe dans l'info-bulle. Définissez-le sur true, puis appuyez sur le code HTML dans l' titleattribut de la balise.

Voir ce violon ici - j'ai défini l'attribut html sur true via le data-html="true"dans la <a>balise, puis je viens de l'ajouter dans le html ad hoc à titre d'exemple.

George Wilson
la source
3
Eh bien, leur documentation n'est pas si claire sur ce domaine. Merci d'avoir partagé cette réponse! :)
sergserg
3
La documentation bootstrap est notoirement nul :) Heureux d'avoir pu clarifier les choses!
George Wilson
6
L'exemple du violon ne fonctionne pas pour moi. Je vois toujours le code HTML brut.
Sonson123
3
Probablement une modification du code Bootstrap comme vous le pensez. Avant d'avoir toutes mes info-bulles câblées pour les titres html en utilisant {html: true} dans les attributs de fonction, mais en passant de 2.2.2> 2.3.1, j'ai dû ajouter data-html = "true" à mes éléments et j'ai simplement supprimé le {html: true} partie. Je souhaite vraiment qu'ils essaient de bien faire les choses plus souvent la première fois et ne pas infliger des changements de rupture constamment entre les versions.
Andrew Swihart
1
Voir ici: jsfiddle.net/44khF/148 . De plus, il ne semble fonctionner qu'avec l'attribut data et ne pas utiliser html: true dans l'initialisation si des délégués sont utilisés.
ptutt
34

Tout 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 spécifie comment le texte de l'info-bulle doit être transformé en éléments DOM. Par défaut, le code Html est échappé dans les info-bulles pour empêcher les attaques XSS. Disons que vous affichez un nom d'utilisateur sur votre site et que vous affichez une petite biographie dans une info-bulle. Si le code html n'est pas échappé et que l'utilisateur peut modifier la bio lui-même, il pourrait injecter du code malveillant.

Matt Zeunert
la source
5
data-original-titleest l'endroit où bootstrap stocke temporairement titles'il est présent. data-titlesuffit si vous n'avez pas de titre, comme un<a href="#" title="xxx">
davidkonrad
c'est génial et simple
Gayan
Bonjour @MattZeunert Je l'ai utilisé et fonctionne parfaitement bien mais je veux mettre à jour le titre selon mes données à venir sans recharger la page et définir dynamiquement, je veux dire changer le contenu à l'intérieur du titre.
3 règles du
32

Une autre solution pour éviter d'insérer du html dans data-title est de créer un div indépendant avec du contenu html d'info-bulle, et de vous référer à ce div lors de la création de votre 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 complexe et activer autant d'infobulles que vous le souhaitez.

démo en direct ici sur codepen

migli
la source
Fantastique. Je suis si heureux que quelqu'un ait proposé une solution qui ne gâche pas le HTML directement dans la propriété data.
Mir
27

L' htmlattribut data fait exactement ce qu'il dit dans la documentation. Essayez ce petit exemple, aucun JavaScript n'est nécessaire (découpé en lignes pour clarification):

<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émos JSFiddle:

Davidkonrad
la source
7

réglez l'option "html" sur true si vous voulez avoir du HTML dans l'info-bulle. Le code 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});

Échantillon en direct

Andriy F.
la source