Je suis nouveau dans Bootstrap et j'ai du mal à faire fonctionner les fonctionnalités de popover et d'info-bulle. Je n'ai eu aucun problème avec les listes déroulantes et les modèles, mais il me semble qu'il me manque quelque chose pour le popover et les info-bulles.
Des info-bulles s'affichent, mais elles ne sont pas stylées et situées comme les exemples de bootstrap. Et le popover ne fonctionne pas du tout.
Jetez un œil et dites-moi ce qui me manque.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/index.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p id="tool"class="muted" style="margin-bottom: 0;">
Tight pants next level keffiyeh
<a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<h3>Live demo</h3>
<div style="padding-bottom: 24px;">
<a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function() {
$('.tool').tooltip();
$('.btn').popover();
}); //END $(document).ready()
</script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>
</body>
</html>
javascript
jquery
css
twitter-bootstrap
user2560895
la source
la source
Réponses:
Il s'avère qu'Evan Larsen a la meilleure réponse . Veuillez augmenter sa réponse (et / ou la sélectionner comme réponse correcte) - c'est génial.
Travailler jsFiddle ici
En utilisant l'astuce d'Evan, vous pouvez instancier toutes les info-bulles avec une seule ligne de code:
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});Vous verrez que toutes les info-bulles de votre long paragraphe ont des info-bulles de travail avec une seule ligne.
Dans l'exemple jsFiddle (lien ci-dessus), j'ai également ajouté une situation où une info-bulle (par le bouton de connexion) est activée par défaut. En outre, le code de l'info-bulle est AJOUTÉ au bouton dans jQuery, pas dans le balisage HTML.
Popovers font travailler les mêmes que les info - bulles:
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});Et voila! Succès enfin.
L'un des plus gros problèmes pour résoudre ce problème était de faire fonctionner le bootstrap avec jsFiddle ... Voici ce que vous devez faire:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
Maintenant, vous êtes prêt à partir.
la source
J'utilise ceci sur toutes mes pages pour activer l'info-bulle
$(function () { $("[data-toggle='tooltip']").tooltip(); });la source
Travailler avec BOOTSTRAP 3: bref et simple
Vérifier - JS Fiddle
HTML
<div id="myDiv"> <button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button> </div>Javascript
$(function () { $("[data-toggle='tooltip']").tooltip(); });la source
Je devais le faire sur DOM prêt
$( document ).ready(function () { // this has to be done after the document has been rendered $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips $('[data-toggle="popover"]').popover({ trigger: 'hover', 'placement': 'top', 'show': true }); });Et changez mes ordres de chargement pour être:
la source
Pour une raison quelconque, la seule façon dont j'ai pu faire fonctionner mon code est de changer deux choses. Si rien n'a fonctionné pour vous jusqu'à présent, veuillez donner un tourbillon à ceci:
$('body').popover({ selector: '[data-toggle="popover"]', trigger: 'hover', placement: 'right' });la source
Vous avez une erreur de syntaxe dans votre script et, comme indiqué par xXPhenom22Xx, vous devez instancier l'info-bulle.
<script type="text/javascript"> $(document).ready(function() { $('.btn-danger').tooltip(); }); //END $(document).ready() </script>Notez que j'ai utilisé votre classe "btn-danger". Vous pouvez créer une classe différente ou utiliser un fichier
id="someidthatimakeup".la source
Il vous suffit d'activer l'info-bulle:
$('some id or class that you add to the above a tag').popover({ trigger: "hover" })la source
Si vous utilisez Rails et ActiveAdmin, ce sera votre problème: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 Fondamentalement, un conflit avec active_admin.js
Voici la solution: https://stackoverflow.com/a/11745446/264084 (réponse de Karen) tldr: Déplacez les actifs active_admin dans le répertoire "vendor".
la source