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

Si je coche 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 code html dans l'info-bulle", mais le type est un booléen. Comment puis-je utiliser du html complexe à l'intérieur d'une info-bulle?

InformationsquelleAutor sergserg | 2012-12-04
  1. 239

    Ce paramètre est seulement de savoir si vous allez utiliser le html complexe dans l'info-bulle. Mis à true et de cliquer sur le code html dans le title attribut de la balise.

    Voir ce violon ici - j'ai mis l'attribut html pour vrai à travers la data-html="true" dans le <a> tag puis juste d'ajouter dans le code html ad hoc comme un exemple.

    • Bien que leur documentation n'est pas claire sur la question. Merci pour le partage de cette réponse! 🙂
    • Le bootstrap de la documentation est notoirement déchets 🙂 Content d'avoir pu clarifier les choses!
    • Le violon exemple ne fonctionne pas pour moi. Je vois encore le code HTML brut.
    • Ta tout à fait raison - pour une raison quelconque, il ne semble pas être en marche plus :/ je suis vraiment surchargés de travail à l'instant -, mais je vais essayer de regarder de cette semaine et de le mettre à jour - bootstrap a mis à niveau vers 2.3.0 depuis que j'ai écrit ce donc, il pourrait y avoir eu des changements!
    • En dépit de ne pas changer le violon semble fonctionner de nouveau. Bizarre, peut - être un violon d'erreur plutôt que mon code erreur??
    • Il n'y a rien dans le changelog sur mais aussi, pourrait être due à la méthode bootstrap avoir l'2.3.1 mise à jour?
    • Probablement un peu de changement de code d'Amorçage comme vous pensez. Avant, j'avais toute les info-bulles de câble pour html titres à l'aide de {html: true} dans la fonction attributs, mais passer d'2.2.2 > 2.3.1, j'ai dû ajouter de la data-html="true" pour ma éléments et simplement abandonné le {html: true} partie. J'aimerais vraiment qu'ils vont essayer de faire les choses le plus souvent la première fois et de ne pas infliger de rupture est en constante évolution entre les versions.
    • Je pense que la raison pour laquelle cela ne fonctionne pas est jsFiddler n'aime pas les fichiers externes à venir à partir de github...ou non par CDN
    • Voir ici: jsfiddle.net/44khF/148. Aussi, il semble que pour travailler avec les données d'attribut et non pas à l'aide de html: true dans l'initialisation si les délégués sont utilisés.

    InformationsquelleAutor George Wilson
  2. 34

    Comme normale, à l'aide de data-original-title:

    Html:

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

    Javascript:

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

    Le code html paramètre spécifie la manière dont le texte de l'infobulle devrait être transformé en des éléments du DOM. Par défaut, le code Html est échappé dans les info-bulles pour empêcher les attaques XSS. Dites vous permet d'afficher un nom d'utilisateur sur votre site et de vous montrer une petite bio dans une info-bulle. Si le code html n'est pas échappé, et l'utilisateur peut modifier la bio eux-mêmes, ils pourraient injecter du code malveillant.

    • data-original-title est où le bootstrap stocker temporairement title si elle est présente. data-title est suffisant si vous n'avez pas de titre, comme un <a href="#" title="xxx">
    • c'est une grande et simple
    • Bonjour @MattZeunert je l'ai utilisé et fonctionne parfaitement bien, mais je veux mettre à jour le titre que par ma venue données sans recharger la page et de définir dynamiquement, je veux dire d'en modifier le contenu à l'intérieur de la propriété.
    InformationsquelleAutor Matt Zeunert
  3. 26

    Une autre solution pour éviter l'insertion de code html dans de données-titre est de créer indépendant de la div avec info-bulle du contenu html, et de se référer à cette div lors de la création de votre info-bulle :

    <!-- 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 des complexes lisible contenu html, et de l'activer comme beaucoup d'info-bulles que vous le souhaitez.

    démonstration en direct ici sur codepen

    • excellente solution! merci @migli
    • Fantastique. Je suis tellement content que quelqu'un a proposé une solution qui n'est pas du bourrage de crâne HTML directement dans la propriété data.
    InformationsquelleAutor migli
  4. 25

    La html de données de l'attribut est exactement ce qu'il dit il le fait dans les docs. Essayez ce petit exemple, pas de JavaScript nécessaire (coupée en lignes de 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>


    JSFiddle démos:

    InformationsquelleAutor davidkonrad
  5. 7

    ensemble "html" option à true si vous voulez avoir du html dans une info-bulle. Html est déterminé par l'option "titre" (lien de l'attribut title ne doit pas être défini)

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

    En direct de l'échantillon

    InformationsquelleAutor Andriy F.