Les infobulles de Bootstrap ne fonctionnent pas

Question

Les infobulles de Bootstrap ne fonctionnent pas

Demandé el 25 de Février, 2012: Quand la question a-t-elle été
137099 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je deviens fou ici.

J'ai le HTML suivant :

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

Et l'infobulle de style Bootstrap refuse de s'afficher, juste une infobulle normale.

Le fichier bootstrap.css fonctionne très bien, et je peux voir les classes qui s'y trouvent.

J'ai placé tous les fichiers JS pertinents à la fin de mon fichier HTML :

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

J'ai regardé la source de l'exemple de Bootstrap et je ne vois rien qui déclenche l'infobulle nulle part. Je suppose donc que cela devrait fonctionner, ou bien j'ai raté quelque chose d'essentiel ?

J'ai des modales, des alertes et d'autres choses qui fonctionnent très bien, donc je ne suis pas un crétin fini ;)

Merci pour toute aide !

Demandé el 25 de Février, 2012 par Mike Bartlett

2 votes

L'infobulle est lancée dans le fichier application.js dans l'exemple de Twitters. Pouvez-vous poster votre html ? J'aimerais jeter un coup d'oeil à la façon dont vous initialisez le script.

Commenté el 25 de Février, 2012 par Andres Ilich

2 votes

Ahhhhh.... Je l'ai ignoré étant donné le premier commentaire. Cela devrait donc fonctionner : code <a href="#" rel="tooltip" title="Un joli tooltip" class="tooltip-test">test</a><br> <script> // démonstration du tooltip $('.tooltip-test').tooltip() </script>.

Commenté el 25 de Février, 2012 par Mike Bartlett

1 votes

N'oubliez pas de passer un sélecteur aux options de l'infobulle, $('.tooltip-test').tooltip({ selector: "a" })

Commenté el 25 de Février, 2012 par Andres Ilich

Afficher 4 autres commentaires

Answer 1

5 Réponses

Answer 2

293voto

Manuel Points 4099

En résumé, activez vos infobulles à l'aide de sélecteurs jQuery.

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

En fait, vous n'avez pas besoin d'utiliser le sélecteur d'attributs, vous pouvez l'invoquer sur n'importe quel élément même s'il ne possède pas de rel="tooltip" dans son étiquette.

Répondu el 26 de Février, 2012 par Manuel (4099 Points )

14 votes

Pour ceux qui travaillent avec Rails, ceci est déjà défini dans le fichier bootstrap.js.coffee avec $(".tooltip").tooltip() . Assurez-vous d'inclure //= require bootstrap dans votre application.js .

Commenté el 15 de Avril, 2012 par slhck

6 votes

L'ajout de la classe .tooltip à n'importe quel élément casse les infobulles dans mon cas. Le contenu de l'élément avec la classe .tooltip sera masqué et l'info-bulle s'affichera si je parviens à trouver l'élément masqué avec ma souris. L'utilisation de tout autre sélecteur ou nom de classe fonctionne bien.

Commenté el 12 de Février, 2013 par Leito

4 votes

@Leito c'est correct, bootstrap définit les styles pour les éléments suivants .tooltip et par défaut, ils sont invisibles. Vous pouvez utiliser la fonction rel ou toute autre classe comme sélecteur, cependant.

Commenté el 12 de Février, 2013 par Manuel

Afficher 10 autres commentaires

Answer 3

263voto

ImaJedi4ever Points 136

Après avoir rencontré le même problème, j'ai découvert que cette solution fonctionnait sans avoir à ajouter des attributs de balise supplémentaires en dehors des attributs requis par Bootstrap.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

J'espère que cela vous aidera !

Répondu el 21 de Mars, 2014 par ImaJedi4ever (136 Points )

21 votes

Merci ! Cela a fonctionné pour moi. D'une manière ou d'une autre, les autres solutions de cette page ne fonctionnaient pas pour moi.

Commenté el 27 de Juillet, 2014 par Roman

1 votes

Je suis avec Roman. Cette solution fonctionne également avec les variantes css de bootswatch.

Commenté el 4 de Octobre, 2014 par DaveCS

0 votes

Ça a marché pour moi. Rien d'autre ne l'a fait démarrer jusqu'à ce que j'essaie ceci. Merci !

Commenté el 17 de Novembre, 2014 par BlakePetersen

Afficher 8 autres commentaires

Answer 4

33voto

Harish Kumar Points 307

Vous n'avez pas besoin de tous les fichiers js séparément.

Utilisez simplement les fichiers suivants si vous voulez utiliser toutes les fonctions du bootstrap :

-bootstrap.css
-bootstrap.js

Les deux peuvent être trouvés dans http://twitter.github.com
et enfin
-Dernière version de jquery.js

Pour les Glyphicons vous avez besoin de l'image

glyphicons-halfings.png et/ou glyphicons-halfings-white.png(images de couleur blanche)
que vous devez télécharger dans le dossier /img/ de votre site web (ou) stocker où vous voulez mais changer le répertoire du dossier dans le bootstrap.css.

Pour l'info-bulle vous avez besoin du script suivant à l'intérieur de votre <head> </head> étiquette

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

C'est ça...

Répondu el 29 de Juin, 2012 par Harish Kumar (307 Points )

Answer 5

24voto

Igor Shvydok Points 91

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Celui-ci est le travail pour moi.

Répondu el 21 de Avril, 2014 par Igor Shvydok (91 Points )

2 votes

Cette proposition a parfaitement fonctionné pour moi aussi. Je l'ai aimée parce qu'elle est simple et élégante. Elle vous permet de continuer à utiliser Bootstrap comme si le plugin était initialisé par défaut, comme c'est le cas pour les éléments Dropdown et Tab. J'ai ajouté le JS proposé par @Igor dans un nouveau fichier et l'a regroupé à l'original bootstrap.js

Commenté el 8 de Mai, 2014 par Iago Rodríguez-Quintana

Answer 6

20voto

Amir Soleymani Points 195

Je sais que c'est une vieille question, mais comme j'ai eu ce problème avec la nouvelle version de bootstrap et que ce n'est pas clair sur le site web, voici comment activer l'infobulle.

donnez à votre élément une classe comme "tooltip-test".

puis activez cette classe dans votre balise javascript :

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Répondu el 2 de Août, 2013 par Amir Soleymani (195 Points )

0 votes

C'est la seule solution qui a fonctionné pour moi. J'utilise data-original-title="{{someAngularJSVar}}" pour mettre à jour le titre et cela fonctionne parfaitement.

Commenté el 10 de Mai, 2018 par WKara

Les infobulles de Bootstrap ne fonctionnent pas

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Les infobulles de Bootstrap ne fonctionnent pas

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: