L’info-bulle d’amorçage ne s’affiche pas

J’essaie d’utiliser l’ info-bulle Bootstrap dans une de mes applications. Actuellement, j’ai les éléments suivants:

Malheureusement, mon info-bulle n’est pas affichée. J’essaie de comprendre ce que je fais mal. Je sais qu’il peut être créé via JavaScript. Cependant, j’essaie de définir ma bulle d’aide 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 dans un sens purement déclaratif? Si oui, quelqu’un peut-il me montrer comment via un échantillon JSFiddle ou Bootply? Je frappe vraiment la tête sur celui-ci.

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

Fonctionnalité opt-in:
Pour des raisons de performances, les info-bulles Tooltip et Popover data sont opt-in, ce qui signifie que vous devez les initialiser vous-même.

Donc, vous devez appeler .tooltip() manuellement en JavaScript comme ceci:

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

Ou utilisez le sélecteur de votre choix.

Démo de travail dans jsFiddle

Ce qui devrait ressembler à ceci:

capture d'écran

Dans mon projet, j’ai une div avec la classe .btn-group et 3 éléments ‘a’ avec la classe btn. L’initialisation avec le code officiel Bootstrap n’a pas fonctionné (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épond par ImaJedi4ever qui fonctionne à merveille pour moi, pour initialiser l’info-bulle de bootstrap:

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

Avait un problème montrant le meteor avec réagir et bootstrap 4 alpha. cela fonctionne comme une magie!

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