261

Je deviens fou ici.

J'ai le HTML suivant:

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

Et l'info-bulle de style Bootstrap refuse de s'afficher, juste une info-bulle normale.

J'ai bootstrap.css qui fonctionne très bien, et je peux voir les classes là-dedans

J'ai 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 initie l'infobulle n'importe où là-dedans. Donc je suppose que ça devrait juste marcher, ou est-ce que je manque quelque chose de vital ici?

J'ai des modaux et des alertes et d'autres choses qui fonctionnent très bien, donc je ne suis pas un idiot total;)

Merci pour toute aide!

twitter-bootstrap Mike Bartlett
la source

2

L'info-bulle est lancée dans le fichier application.js dans l'exemple twitters. Pouvez-vous publier votre html? Je voudrais voir comment vous initialisez le script.

Andres Ilich

2

Ahhhhh .... J'ai ignoré cela étant donné le premier commentaire. Cela devrait donc fonctionner: code<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> test </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>

Mike Bartlett

1

n'oubliez pas de passer un sélecteur aux options d'info-bulles,$('.tooltip-test').tooltip({ selector: "a" })

Andres Ilich

Merci Andres. En fait, je ne semblais pas avoir besoin du sélecteur là-dedans, je pense que c'est parce que la classe du a est référencée sous le nom de tooltip-test.

Mike Bartlett

3

Sans l'option de sélection, l'infobulle ne fonctionne pas pour moi, voici une démo que j'ai mise en place: jsfiddle.net/VXctp , essayez-la sans le sélecteur.

Andres Ilich

276

Pour résumer: activez vos info-bulles à l'aide des 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 n'en a pas rel="tooltip"dans sa balise.

Manuel Ebert
la source

13

Pour ceux qui travaillent avec Rails, cela est déjà défini dans bootstrap.js.coffeeavec $(".tooltip").tooltip(). Assurez-vous simplement de l'inclure //= require bootstrapdans votre application.js.

slhck

6

L'ajout de la classe .tooltip à n'importe quel élément rompra les info-bulles pour moi. Le contenu à l'intérieur de l'élément avec la classe .tooltip se cachera et l'infobulle affichera si je parviens à trouver l'élément caché avec ma souris. L'utilisation d'un autre sélecteur ou nom de classe fonctionnera correctement. \

Leonel Galán

4

@Leito c'est correct, bootstrap définit les styles pour .tooltipet par défaut, ils sont invisibles. Vous pouvez cependant utiliser l' relattribut ou toute autre classe comme sélecteur.

Manuel Ebert

3

Oui, vous avez besoin à la fois du balisage HTML et des sélecteurs JS. Ce ne sont pas des façons alternatives d'appliquer des info-bulles.

ATSiem

1

Certains peuvent essayer d'afficher une info-bulle dans un modal et cela ne fonctionne pas dans toutes les versions de bootstrap. Si vous l'essayez dans une page normale, pas un modal, et que cela fonctionne, alors vous savez que c'est le problème.

mjnissim

212

Après avoir rencontré le même problème, j'ai trouvé 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 t'aides!

Marcus Hoelscher
la source

20

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.

Roman

1

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

DaveCS du

Cela a fonctionné pour moi. Rien d'autre ne l'a donné vie jusqu'à ce que j'essaye. Merci!

BlakePetersen

1

Cela a également fonctionné pour moi. Toute idée pourquoi $ ('[data-toggle = "tooltip"]'). Tooltip ({'placement': 'top'}); ne fonctionne pas?

ZeroCool

Merci, cela a fonctionné pour moi. Assurez-vous simplement d'insérer le code entre les balises <script> APRÈS avoir chargé la bibliothèque JQuery.

GeraldScott

31

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

Utilisez simplement les fichiers suivants si vous souhaitez utiliser toutes les fonctions d'amorçage:

-bootstrap.css
-bootstrap.js

les deux peuvent être trouvés sur http://twitter.github.com
et enfin
-La dernière version de jquery.js

Pour les glyphiques, 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) le stocker où vous le souhaitez, mais modifiez le répertoire du dossier dans le bootstrap .css

Pour l'infobulle, vous avez besoin du script suivant dans votre <head> </head>balise

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

C'est tout...

Harish Kumar
la source

27

http://getbootstrap.com/javascript/#tooltips-usage

Fonction d'activation Pour des raisons de performances, les info-bulles et les API de données Popover sont opt-in, ce qui signifie

vous devez les initialiser vous-même.

Une façon d'initialiser toutes les info-bulles sur une page serait de les sélectionner par leur attribut de basculement de données:

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

mettre ce morceau de code dans votre html vous permet d'utiliser les info-bulles

Exemples:

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

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Max O.
la source

2

Merci d'avoir partagé ce concept d'opt-in! Ne le lisez jamais à partir de didacticiels.

dpp

La solution à toutes mes info-bulles jquery / bootstrap whoas

DJ Burb

Le lien fourni est manquant: veuillez consulter getbootstrap.com/docs/4.1/components/tooltips

Guillaume Husta

20

Je sais que c'est une vieille question, mais puisque 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'info-bulle.

donner à 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>

Amir Soleymani
la source

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

WKara

20

HTML

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

JQuery

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

Celui-ci est un travail pour moi.

Igor Shvydok
la source

1

Cette proposition a également parfaitement fonctionné pour moi. Je l'ai aimé car il est simple et élégant. Il vous permet de continuer à utiliser les normes Bootstrap comme si le plugin était initialisé par défaut, comme cela se produit avec les éléments Dropdown et Tab. J'ai ajouté le JS proposé par @Igor dans un nouveau fichier et empaqueté il aux bootstrap.js d' origine

Iago Rodríguez-Quintana

14

Si vous faites $("[rel='tooltip']").tooltip();comme d'autres réponses l'ont suggéré, vous n'activez les info-bulles que sur les éléments qui sont actuellement dans DOM. Cela signifie que si vous allez changer de DOM et insérer du contenu dynamique plus tard, cela ne fonctionnera pas. De plus, cela est beaucoup moins efficace car il installe un gestionnaire d'événements pour les éléments individuels au lieu d'utiliser la délégation d'événements JQuery. Donc, la meilleure façon que j'ai trouvée pour activer les info-bulles Bootstrap est cette seule ligne de code que vous pouvez placer dans le document prêt et l'oublier:

$(document.body).tooltip({ selector: "[title]" });

Notez que j'utilise titlecomme sélecteur au lieu de rel=titleou data-title. Cela a l'avantage de pouvoir être appliqué à de nombreux autres éléments (le reln'est censé être que pour les ancres) et cela fonctionne également comme "secours" pour les anciens navigateurs.

Notez également que vous n'avez pas besoin d' data-toggle="tooltip"attribut si vous utilisez le code ci-dessus.

Les info-bulles d'amorçage sont coûteuses car vous devez gérer les événements de souris sur chacun des éléments. C'est la raison pour laquelle ils ne l'ont pas activé par défaut. Donc, si vous décidez de commenter la ligne ci-dessus, votre page fonctionnera toujours si vous utilisez l'attribut title.

Si vous êtes d'accord pour ne pas utiliser l'attribut title, je recommanderais d'utiliser une solution CSS pure telle que Hint.css ou consultez http://csstooltip.com qui ne nécessite aucun code JavaScript.

Shital Shah
la source

Je me bats avec celui-ci parce que la génération dynamique va à plusieurs niveaux. La valeur href est un contenu généré dynamiquement et l'ID div résultant est basé sur le numéro d'élément qui correspond à la valeur href. Donc, si j'ai une page de liens de type d'élément A, j'ai une liste d'éléments a-1, élément a-2, élément a-3, chacun de ces liens est vers la page individuelle des éléments, mais je veux le contenu de l'infobulle pour afficher du contenu dynamique en survol, afin que l'utilisateur puisse se faire une idée de l'élément avant de cliquer sur le lien complet.

Melanie Sumner

Ce fut le plus utile. J'ai eu l'info-bulle définie pour se lier à une icône, et la bibliothèque d'icônes avait une sorte de chargement asynchrone afin qu'elle ne puisse pas se lier. C'était tellement étrange parce que cela fonctionnerait lors de l'utilisation d'un sélecteur de classe mais pas d'ID. Merci de votre aide!

Nick Woodhams le

14

C'est le moyen le plus simple. Mettez juste ceci avant </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Consultez les exemples donnés dans la documentation de Bootstrap sur les info-bulles .

Par exemple:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

Marcos Cassiano
la source

2

veuillez fermer l'attribut type ... l'édition d'une seule faute de frappe est un PITA: S

Mohd Abdul Mujib

10

L'info-bulle et le popover ne sont PAS uniquement des plugins CSS comme la liste déroulante ou la barre de progression. Pour utiliser les info-bulles et les fenêtres contextuelles, vous DEVEZ les activer à l'aide de jquery (lire javascript).

Donc, disons que nous voulons qu'un popover soit affiché en cliquant sur un bouton html.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Ensuite, vous devez avoir le code javascript suivant pour activer la popover:

$('.popovers-to-be-activated').popover();

En fait, le code javascript ci-dessus activera le popover sur tous les éléments html qui ont la classe "popovers-to-be-enabled".

Inutile de dire que mettez le javascript ci-dessus dans le rappel prêt pour DOM pour activer tous les popovers dès que DOM est prêt:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

Mayank Jaiswal
la source

5

dans la section tête, vous devez d'abord ajouter le code suivant

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Ensuite, dans la section corps, vous devez écrire le code suivant

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

Rush.2707
la source

4

Si tout n'est toujours pas résolu Utiliser la dernière bibliothèque Jquery, vous n'avez besoin d'aucun des sélecteurs jquery si vous utilisez les derniers bootstrap 2.0.4 et jquery-1.7.2.js

Utilisez simplement rel="tooltip" title="Your Title" data-placement=" "

Utilisez haut / bas / gauche / droite dans le placement des données selon votre souhait.

Harish Kumar
la source

3

J'ai ajouté jquery et bootstrap-tooltip.js dans l'en-tête. L'ajout de ce code en pied de page fonctionne pour moi! mais quand j'ajoute le même code dans l'en-tête ça ne marche pas!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

Karthik
la source

3

Dans ce cas, le DOM n'a pas encore été chargé, donc tous les éléments ne peuvent pas exister sur la page. Enveloppez le code ci-dessus dans$(function() { ... });

johnml

3

Si l'utilisation de Rails + Haml est beaucoup plus facile à inclure l'info-bulle, faites simplement:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

C'est juste ajouter la ligne suivante à la fin de l'élément.

:rel => "tooltip", :title => "Referential Guide"

Andres Calle
la source

J'espérais vraiment que ça allait marcher pour moi, mais hélas ça ne l'a pas fait.

turboladen

Maintenant, je suis plus dans Djanto que Rails, mais si vous collez votre code, je pourrais essayer de vous donner quelques conseils.

Andres Calle

3

Dans mon cas particulier, cela n'a pas fonctionné car j'incluais deux versions de jQuery. Un pour le bootstrap, mais un autre (une autre version) pour Google Charts.

Lorsque je supprime le chargement jQuery pour les graphiques, cela fonctionne bien.

Dieter
la source

3

Je viens d'ajouter:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

ci-dessous bootstrap.min.js et cela fonctionne.

Andy.sin
la source

3

Permet d'utiliser un exemple pour montrer comment les info-bulles peuvent être ajoutées à n'importe quel élément HTML de votre document.

REMARQUE:

Si ces exemples d'infobulles ne fonctionnent pas lorsque vous les placez dans votre page, vous avez un autre problème. Vous devez regarder des choses comme:

L'ordre des scripts inclus
Vérifiez si vous essayez d'initialiser des éléments HTML qui ont été supprimés
Vérifiez si vous essayez d'appeler des méthodes dans des fichiers JS que vous n'incluez plus

Vérifiez si vous incluez le fichier JS qui fournit les fonctionnalités dont vous avez besoin (pas seulement pour les info-bulles, mais tous les composants que vous utilisez sur la page).

<head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

L'échec de N'IMPORTE QUEL des éléments ci-dessus peut (et fait souvent) empêcher le javascript de se charger et / ou de fonctionner, et cela garde tout agréable et cassé.

EXEMPLES DE TRAVAIL

Disons que vous avez un badge et que vous souhaitez qu'il affiche une info-bulle lorsque l'utilisateur survole.

HTML d'origine:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Infobulles Bootstrap simples

Si vous créez des info-bulles pour un élément HTML et que vous utilisez des info-bulles d'amorçage simple, alors vous serez responsable d'appeler les initialiseurs d'infobulles avec votre propre code JavaScript.

AVANT

<span class="badge badge-sm badge-plain">Admin Mode</span>

APRÈS

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALISATEUR

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Infobulles de modèles d'amorçage (comme INSPINIA)

Si vous utilisez un modèle d'amorçage (tel que INSPINIA), vous incluez un script de prise en charge pour prendre en charge les fonctionnalités du modèle:

    <script src="/Scripts/app/inspinia.js" />

Dans le cas d'INSPINIA, le script inclus initialise automatiquement toutes les info-bulles en exécutant le code javascript suivant une fois le chargement du document terminé:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

Pour cette raison, vous n'avez PAS à initialiser vous-même les info-bulles de style INSPINIA. Mais vous devez formater vos éléments d'une manière spécifique. L'initialiseur recherche les éléments HTML avec tooltip-demodans l' classattribut, puis appelle la tooltip()méthode pour initialiser tous les éléments enfants qui ont l'attributdata-toggle="tooltip" défini.

Pour notre exemple insigne, placer un élément extérieur autour d' elle (comme un <div>ou <span>) qui a class="tooltip-demo", puis placez les data-toggle, data-placementet les titleattributs de l'info - bulle réelle au sein de l'élément qui est le badge. Modifiez le code HTML d'origine par le haut pour ressembler à ceci:

AVANT

<span class="badge badge-sm badge-plain">Admin Mode</span>

APRÈS

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

INITIALISATEUR

None

Notez que tous les éléments enfants dans le <span class="tooltip-demo"> élément auront leur info-bulle correctement préparée. Je pourrais avoir trois éléments enfants, tous ayant besoin d'infobulles, et les placer dans un seul conteneur.

Plusieurs éléments, chacun avec une info-bulle

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

La meilleure utilisation pour cela serait d'ajouter le class="tooltip-demo"à un <td>ou un extérieur <div>ou <span>.

Infobulles Bootstrap simples lors de l'utilisation d'un modèle

Si vous utilisez INSPINIA, mais que vous ne voulez pas ajouter de balises externes <div>ou supplémentaires <span>pour créer des info-bulles, vous pouvez utiliser des info-bulles Bootstrap standard sans interférer avec le modèle. Dans ce cas, vous serez responsable de l'initialisation des info-bulles vous-même. Cependant, vous devez utiliser une valeur personnalisée dans l' classattribut pour identifier vos éléments d'info-bulle. Cela empêchera votre initialiseur Tooltip d'interférer avec les éléments affectés par INSPINIA. Dans notre exemple, utilisons standalone-tt:

AVANT

<span class="badge badge-sm badge-plain">Admin Mode</span>

APRÈS

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALISATEUR

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>

Mike Stillion
la source

2

Si vous créez votre html qui contient l'info-bulle avec javascript, puis l'insérez dans le document, vous devez activer le popover / info-bulle APRÈS avoir inséré le html dans le document, pas au chargement du document ...

chri_chri
la source

2

Vous devez mettre l'info-bulle javascript après le html. comme ça :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Ou utilisez $ (document) .ready:

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

L'info-bulle ne fonctionne pas, car vous placez le HTML de l' info - bulle avant le javascript , donc ils ne savent pas s'il existe un javascript pour l'info-bulle. À mon avis, le script est lu de haut en bas.

Zoom
la source

2

J'ai eu un problème similaire et surtout si vous utilisez un conteneur de boutons comme un conteneur de boutons vertical. Dans ce cas, vous devez définir le conteneur comme le «corps»

I have added a jsfiddle example

exemple

Shawn Vader
la source

1

Mettez votre code dans le document prêt

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

Dans mon cas, il me manquait également les classes CSS info-bulle sur http://twitter.github.com/bootstrap/assets/css/bootstrap.css, alors ne l'oubliez pas.

Joao Leme
la source

1

À partir des documents de démarrage sur les info-bulles

Les info-bulles sont opt-in pour des raisons de performances, vous devez donc les initialiser vous-même. Une façon d'initialiser toutes les info-bulles d'une page serait de les sélectionner par leur attribut data-toggle:

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

Rahil Ahmad
la source

0

Ajoutez data-toggle="tooltip"les éléments que vous voulez avec une info-bulle.

Calum Childs
la source

0

Vous devez procéder comme suit. Ajouter le

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

code quelque part sur votre page (de préférence dans la <head>section).

Ajoutez également data-toggle: "tooltip"à tout ce que vous souhaitez activer avec.

Calum Childs
la source

0

vous pouvez utiliser Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

Et appelez la fonction info-bulle:

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

Mohsen Newtoa
la source

-2

Alternative rapide et plus légère au plug-in d'info-bulles Bootstrap:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

L'étiquette / texte doit être placé dans un wrapper de classe "mytooltip". Ce wrapper doit avoir un ID.

Après l'étiquette, il y a le texte de l'info-bulle enveloppé dans un div de la classe "mytooltiptext" et de l'id composé de l'id du wrapper parent + "_tttext". D'autres options pour les sélecteurs peuvent être utilisées.

J'espère que ça aide.

jdisla
la source

Les info-bulles d'amorçage ne fonctionnent pas

Réponses:

REMARQUE:

EXEMPLES DE TRAVAIL

Infobulles Bootstrap simples

Infobulles de modèles d'amorçage (comme INSPINIA)

Plusieurs éléments, chacun avec une info-bulle

Infobulles Bootstrap simples lors de l'utilisation d'un modèle

HTML:

CSS:

JSCRIPT: