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?

— sergserg
source

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