web-dev-qa-db-fra.com

Bootstrap Info-bulle non affichée

J'essaie d'utiliser le Bootstrap info-bulle dans une de mes applications. Actuellement, j'ai ce qui suit:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

Malheureusement, mon info-bulle ne s'affiche pas. J'essaie de comprendre ce que je fais mal. Je sais qu'il peut être créé via JavaScript. Cependant, j'essaie de définir mon info-bulle de manière déclarative. J'ai confirmé que le fichier Tooltip.js est inclus. Cependant, je ne peux pas comprendre ce que je fais mal.

Est-il possible d'utiliser une info-bulle au sens purement déclaratif? Si oui, quelqu'un peut-il me montrer comment utiliser un échantillon JSFiddle ou Bootply? Je me tape vraiment la tête sur celui-ci.

jquerytwitter-bootstraptooltip
16
user2871401

Non, il n'est pas possible d'utiliser l'info-bulle dans un sens purement déclaratif. De la Docs :

Fonctionnalité d'activation:
Pour des raisons de performances, les API de données Tooltip et Popover sont opt-in, ce qui signifie que vous devez les initialiser vous-même.

Vous devez donc appeler .tooltip() manuellement en JavaScript comme ceci:

$("[data-toggle=tooltip]").tooltip();

Ou utilisez le sélecteur de votre choix.

Démonstration de travail dans jsFiddle

Qui devrait ressembler à ceci:

screenshot

33
KyleMit

Dans mon projet, j'ai un div avec la classe de groupe .btn et 3 éléments 'a' avec la classe btn. Initialisation avec Bootstrap le code officiel ne fonctionne pas (j'utilise Twitter.Bootstrap.less, je ne sais pas si cela fait une différence):

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

Ensuite, j'ai trouvé une solution sur un autre StackOverFlow Répondu par ImaJedi4ever qui fonctionne comme un charme pour moi, pour initialiser l'info-bulle bootstrap:

$(function(){
    $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
});
12
NerdKvothe

J'ai eu un problème à le montrer dans météore avec react et bootstrap 4 alpha. Cela fonctionne comme par magie!

componentDidMount() {
    $(function(){
        $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
    });
},
6
phongyewtong