I Comment créer une infobulle statique dans bootstrap 4

Sur le site Web Bootstrap, il y a une démonstration des infobulles statiques, j'ai copié le html généré pour répliquer l'info-bulle dans mon projet mais cela n'a pas fonctionné. Même si Bootstrap 4 est en cours de développement, la documentation pourrait être bien meilleure. static tooltip I Comment créer une infobulle statique dans bootstrap 4

J'ai essayé

<div class="tooltip tooltip-right" role="tooltip"> <div class="tooltip-inner"> veicle code </div></div>

I ajouté

Obs: Les exemples dynamiques fonctionnent.

Source

2017-08-01 Diego Alves

Vous pouvez également insérer le code JS dans la page comme ceci:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
})

et div pourrait avoir cet attribut

data-toggle="tooltip" data-placement="top" title="Tooltip on top"

Source

2017-08-01 15:47:16

Je ne veux pas montrer une info-bulle. Je veux styliser un div comme une infobulle. –

Vous essayez avec ce code –

Vous pouvez essayer avec des écouteurs d'événements que vous pouvez trouver sur la documentation Bootstrap.

<div class="container"> 

    <button id="myStaticTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Static Tooltip"> 
     Test 
    </button> 

</div>

Et avec ce code Jquery:

$(function() { 
    $('#myStaticTooltip').tooltip('toggle') 
    $('#myStaticTooltip').on('hide.bs.tooltip', function() { return false;}); 
    $('#myStaticTooltip').on('show.bs.tooltip', function() { return false;}); 
})

espère que cela peut vous aider.

Source

2017-08-01 16:52:12

De plus, si vous voulez un 'div' ressemblant à une info-bulle, vous pouvez modifier ce code de réponse en changeant le' button' dans un élément 'span' vide –

Ceci est un extrait du code précédent: https : //bootsnipp.com/snippets/nNM6z –

-1

Vous pouvez essayer ce code suivant:

<div class="bd-example-tooltip-static"> 
    <div class="tooltip tooltip-top" role="tooltip"> 
     <div class="tooltip-inner">Tooltip on the top</div> 
    </div> 
    <div class="tooltip tooltip-right" role="tooltip"> 
     <div class="tooltip-inner">Tooltip on the right</div> 
    </div> 
    <div class="tooltip tooltip-bottom" role="tooltip"> 
     <div class="tooltip-inner">Tooltip on the bottom</div> 
    </div> 
    <div class="tooltip tooltip-left" role="tooltip"> 
     <div class="tooltip-inner">Tooltip on the left</div> 
    </div> 
</div>

Source

2017-08-03 07:33:55

I Comment créer une infobulle statique dans bootstrap 4

Répondre

Questions connexes