web-dev-qa-db-fra.com

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

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'info-bulle", mais le type est booléen. Comment utiliser du code HTML complexe dans une info-bulle?

javascripthtmltwitter-bootstrap-3tooltip
137
sergserg

Ce paramètre indique si vous allez utiliser du code HTML complexe dans l'info-bulle. Réglez-le sur true, puis tapez le code HTML dans l'attribut title de la balise.

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

245
George Wilson

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. Supposons que vous affichiez un nom d'utilisateur sur votre site et que vous montriez une petite biographie dans une info-bulle. Si le code html n'est pas échappé et que l'utilisateur peut modifier lui-même la bio, il peut injecter du code malveillant.

34
Matt Zeunert

Une autre solution pour éviter d'insérer du code HTML dans data-title consiste à créer un div indépendant avec un contenu HTML d'infobulle, et de faire référence à 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

28
migli

L'attribut de données html fait exactement ce qu'il dit dans les documents. Essayez ce petit exemple, aucun JavaScript nécessaire (divisé 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 de JSFiddle:

25
davidkonrad

définissez l'option "html" sur true si vous souhaitez que le code HTML apparaisse 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 live

7
Andriy F.