Bootstrap les info-bulles ne fonctionnent pas
Je vais devenir fou ici.
J'ai le code HTML suivant:
<a href="#" rel="tooltip" title="A Nice tooltip">test</a>
Et l'infobulle de style Bootstrap refuse de s'afficher, mais seulement une infobulle normale.
Bootstrap.css fonctionne très bien et je peux voir les cours là-bas
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 déclenche l'info-bulle où que ce soit. Donc je suppose que ça devrait marcher, ou est-ce qu'il me manque quelque chose de vital ici?
J'ai des modaux, des alertes et d'autres choses qui fonctionnent très bien, donc je ne suis pas un abruti total;)
Merci pour toute aide!
En résumé: 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'attribut, vous pouvez l'invoquer sur n'importe quel élément même s'il ne contient pas rel="tooltip" dans sa balise.
Après avoir rencontré le même problème, j'ai constaté que cette solution fonctionnait sans avoir à ajouter d'autres attributs de balises en dehors des attributs requis 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!
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 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 glyphiques vous avez besoin de l'image
glyphicons-halfings.png et/ou glyphicons-halfings-white.png (images de couleur blanche)
Ce que vous devez télécharger dans/img/le dossier de votre site Web (ou) stockez-le où vous voulez, mais changez le répertoire du dossier dans le fichier bootstrap.css
Pour les info-bulles , vous devez utiliser le script suivant dans votre balise <head> </head>.
<script type='text/javascript'>
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});
</script>
C'est ça...
http://getbootstrap.com/javascript/#tooltips-usage
Fonctionnalité d’inclusion Pour des raisons de performance, l’infos et les apex de données Popover sont optionnels, ce qui signifie
vous devez les initialiser vous-même.
Une façon d'initialiser toutes les info-bulles d'une page consiste à les sélectionner en fonction de leur attribut data-toggle:
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
mettre ce morceau de code dans votre code 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>
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’aide.
donnez à votre élément une classe du type "tooltip-test"
puis activez cette classe dans votre tag javascript:
<script type="text/javascript">
$('.tooltip-test').tooltip();
</script>
<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
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.
Si vous faites $("[rel='tooltip']").tooltip(); comme d'autres réponses l'ont suggéré, vous n'activerez les info-bulles que sur les éléments actuellement présents dans DOM. Cela signifie que si vous modifiez DOM et insérez du contenu dynamique plus tard, cela ne fonctionnera pas. En outre, cela est beaucoup moins efficace car il installe un gestionnaire d’événements pour des éléments individuels par opposition à l’utilisation de la délégation d’événements JQuery. Donc, le meilleur moyen que j'ai trouvé d'activer Bootstrap info-bulles est cette ligne de code que vous pouvez placer dans un document prêt et l'oublier:
$(document.body).tooltip({ selector: "[title]" });
Notez que j'utilise title comme sélecteur au lieu de rel=title ou data-title. Cela a l'avantage de pouvoir être appliqué à de nombreux autres éléments (la rel est supposée uniquement pour les ancres) et fonctionne également comme "repli" pour les anciens navigateurs.
Notez également que vous n'avez pas besoin de l'attribut data-toggle="tooltip" 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 la 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 quand même si vous utilisez l'attribut title.
Si vous êtes d'accord pour ne pas utiliser l'attribut title, je vous recommanderais d'utiliser une solution CSS pure telle que Hint.css ou check http://csstooltip.com qui ne nécessite aucun code JavaScript.
C'est le moyen le plus simple. Il suffit de mettre ceci avant </body>:
<script type="text/javascript">
$("[data-toggle=\"tooltip\"]").tooltip();
</script>
Consultez les exemples donnés dans le 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>
L'info-bulle et popover ne sont PAS des plugins de type CSS uniquement, comme les menus déroulants ou Progressbar. Pour utiliser les info-bulles et les popover, vous DEVEZ les activer en utilisant jquery (lisez javascript).
Supposons donc que nous voulions afficher une popover 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 popover:
$('.popovers-to-be-activated').popover();
En fait, le code javascript ci-dessus activera popover sur tous les éléments html de classe "popovers-to-be-Activé".
Inutile de dire que le javascript ci-dessus est placé dans le rappel prêt pour le DOM afin d'activer tous les popovers dès que le DOM est prêt:
$(function() {
// Handler for .ready() called.
$('.popovers-to-be-activated').popover();
});
dans la section head, 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 body, 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>
Si tout n'est toujours pas résolu Utilisez la dernière bibliothèque Jquery, vous n'avez besoin d'aucun des sélecteurs jquery si vous utilisez les dernières bootstrap 2.0.4 et jquery-1.7.2.js
Il suffit d'utiliser rel="tooltip" title="Your Title" data-placement=" "
Utilisez haut/bas/gauche/droite dans le placement de données selon votre souhait.
S'il est beaucoup plus facile d'inclure l'info-bulle avec Rails + Haml, procédez comme suit:
= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"
C'est simplement ajouter la ligne suivante à la fin de l'élément.
:rel => "tooltip", :title => "Referential Guide"
Je viens d'ajouter:
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
ci-dessous bootstrap.min.js et cela fonctionne.
Dans mon cas particulier, cela n’a pas fonctionné car j’avais inclus deux versions de jQuery. Un pour le bootstrap, mais un autre (une autre version) pour Google Charts.
Lorsque je supprime le chargement de jQuery pour les graphiques, cela fonctionne correctement.
Utilisons 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'info-bulle ne fonctionnent pas lorsque vous les mettez dans votre page, vous avez un autre problème. Vous devez regarder des choses comme:
- L'ordre des scripts étant inclus
- Voyez si vous essayez d'initialiser les éléments HTML qui ont été supprimés
- Voyez 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 pour 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 c'est souvent le cas) empêcher le chargement et/ou l'exécution de javascript, ce qui maintient tout en bon état.
EXEMPLES DE TRAVAIL
Supposons que vous avez un badge et que vous souhaitez qu'il affiche une info-bulle lorsque l'utilisateur le survole.
HTML original:
<span class="badge badge-sm badge-plain">Admin Mode</span>
Plain Bootstrap Info-bulles
Si vous créez des info-bulles pour un élément HTML et que vous utilisez des info-bulles Plain Bootstrap, il vous incombera d'appeler les initialiseurs d'infobulle 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>
INITIALISEUR
<script>
// Initialize any Tooltip on this page
$(document).ready(function ()
{
$('[data-toggle="tooltip"]').tooltip();
}
);
</script>
Bootstrap Template Tooltips (comme INSPINIA)
Si vous utilisez un modèle bootstrap (tel qu'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 lorsque le chargement du document est terminé:
// Tooltips demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
});
De ce fait, 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-demo dans l'attribut class, puis appelle la méthode tooltip() pour initialiser tout élément enfant pour lequel l'attribut data-toggle="tooltip" est défini.
Pour notre exemple de badge, placez un élément externe autour de celui-ci (par exemple, un <div> ou un <span>) portant le class="tooltip-demo", puis placez les attributs data-toggle, data-placement et title dans l'élément correspondant au badge. Modifiez le code HTML d'origine par le haut pour obtenir un résultat similaire
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>
INITIALISEUR
None
Notez que l'info-bulle de tous les éléments enfants de l'élément <span class="tooltip-demo"> sera correctement préparée. Je pourrais avoir trois éléments enfants, nécessitant tous des info-bulles, et les placer dans un 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 serait d’ajouter le class="tooltip-demo" à un <td> ou à un <div> ou un <span> le plus externe.
Plain Bootstrap Infobulles lors de l'utilisation d'un modèle
Si vous utilisez INSPINIA, mais que vous ne souhaitez pas ajouter de balises supplémentaires supplémentaires <div> ou <span> pour créer des info-bulles, vous pouvez utiliser les info-bulles standard Bootstrap sans interférer avec le modèle. Dans ce cas, vous serez responsable de l’initialisation des infobulles vous-même. Toutefois, vous devez utiliser une valeur personnalisée dans l'attribut class pour identifier vos éléments d'infobulle. Cela empêchera votre initialiseur d’infos 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>
INITIALISEUR
<script>
// Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
$(document).ready(function ()
{
$('.standalone-tt').tooltip();
}
);
</script>
J'ai ajouté jquery et bootstrap-tooltip.js dans l'en-tête. Ajouter ce code en pied de page me convient! mais quand j'ajoute le même code dans l'en-tête, cela ne fonctionne pas!
<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
Si vous créez votre code HTML contenant l'info-bulle avec javascript, puis l'insérant dans le document, vous devez activer la popover/info-bulle APRÈS que vous ayez inséré le code HTML dans le document, pas lors du chargement du document ...
Vous devez mettre la bulle d'aide javascript after 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 mettez le tooltip html avant le javascript, ils ne savent donc pas s'il existe un javascript pour l'info-bulle. À mon avis, le script est lu de haut en bas.
J'ai eu un problème similaire, surtout si vous utilisez un conteneur de boutons comme un conteneur de boutons vertical. Dans ce cas, vous devez définir le conteneur comme "corps"
I have added a jsfiddle example
De bootstrap _ docs dans les info-bulles
Les info-bulles sont optionnelles 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()
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 tooltip sur http://Twitter.github.com/bootstrap/assets/css/bootstrap.css donc je ne l'oublie pas.
Ajoutez data-toggle="tooltip" aux éléments de votre choix avec une info-bulle.
Vous devez faire ce qui suit. Ajouter le
<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>
code quelque part sur votre page (de préférence dans la section <head>).
Ajoutez également data-toggle: "tooltip" à tout ce que vous souhaitez activer.