Bootstrap 3.0 Popovers et les info-bulles

Je suis nouveau sur Bootstrap et je vais avoir du mal à obtenir la liste et l'info-bulle des fonctionnalités. Je n'ai eu aucun problème avec les menus déroulants et des modèles, mais j'ai l'impression de manquer quelque chose pour la liste et les info-bulles.

Je suis les info-bulles pour se montrer, mais ils ne sont pas de style et situé comme le bootstrap des exemples. Et la liste n'est pas de travail du tout.

Veuillez jeter un oeil et laissez-moi savoir ce que je suis absent.

       <!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>
  • Je viens de poster la même question il y a quelques minutes, également à l'aide de BS3 avec tout le reste de travail comme les auxiliaires Modaux et les Onglets, mais pas les info-bulles ou Popovers... sera mise à jour, vous devriez je trouve quelque chose.
  • pour la liste, options n'est pas défini
  • Pour maintenant, je suis juste essayer d'obtenir le comportement par défaut, mais je suis intéressé à faire de l'afficher sur le vol stationnaire au lieu de cliquer, mais qui était à côté. Dois-je encore besoin de mettre quelque chose dans les options?
  • Le code ci-dessus est ce que j'utilise actuellement et il ne fonctionne toujours pas. Toutes les suggestions? Dois-je chose dans le mauvais ordre ou de quelque chose?
InformationsquelleAutor user2560895 | 2013-08-23
  1. 146

    S'avère que Evan Larsen a la meilleure réponse. Veuillez upvote sa réponse (et/ou sélectionner la bonne réponse) - c'est génial.

    Travail jsFiddle ici

    À l'aide de Evan truc, 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 dans votre long paragraphe de travail des info-bulles avec juste une ligne.

    Dans le jsFiddle exemple (lien ci-dessus), j'ai également ajouté une situation où une info-bulle (par le bouton De connexion) est activée par défaut. Aussi, l'info-bulle de code est AJOUTÉ au bouton en jQuery, pas dans le balisage HTML.

    Popovers ne fonctionnent de la même que les info-bulles:

    $('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

    Et là vous l'avez! Enfin le succès.

    Un des plus grands problèmes dans la compréhension de ce genre de choses a été prise de bootstrap travailler avec jsFiddle... Voici ce que vous devez faire:

    1. Obtenir une référence pour Twitter Bootstrap CA à partir d'ici: http://www.bootstrapcdn.com/
    2. Coller chaque lien dans le bloc-notes et d'en extraire TOUS à l'exception de l'URL. Par exemple:

      //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
    3. Dans jsFiddle, sur le côté gauche, ouvrez les Ressources Externes de l'accordéon déroulant
    4. Pâte dans chaque URL, en appuyant sur le signe plus après chaque pâte
    5. Maintenant, ouvrez le "Cadres & Extensions" de l'accordéon à la liste déroulante et sélectionnez jQuery 1.9.1 (ou n'importe quel...)

    MAINTENANT, vous êtes prêt à aller.

    • dans le jsFiddle, pourquoi est-trigger qui n'est pas entourée par des guillemets simples, mais le placement est?
    • Il n'y a pas de bonne raison, j'ai juste raté. Mais il semble fonctionner. Peut-être d'un seul mot clés n'ont pas besoin de guillemets, parfois ils ne sont pas nécessaires-pourtant, j'ai l'habitude de les mettre dans.
    • qui semble logique pour moi. Merci pour la clarification.
    • cela ressemble à du charabia pour moi. Ha! juste eu à le dire 😉
    • Pouvez-vous utiliser cette méthode dans la relativité à un conteneur spécifique? L'instanciation de toutes les info-bulles ou popovers à l'intérieur d'un conteneur spécifique?
    • Doit être capable de... voici un jsFiddle qui montre isoler un div parmi la sélection de tous les divs contenant un attribut data-toggle="tooltip". Dans le jsFiddle exemple, vous souhaitez instancier des info-bulles dans un div, pas de couleur un div à l'arrière-plan jaune, donc vous devez remplacer la ligne $(this).css('background','yellow'); avec $(this).tooltip({'placement': 'top'});

    InformationsquelleAutor cssyphus
  2. 230

    Je l'utilise sur toutes mes pages pour activer les info-bulle

    $(function () { $("[data-toggle='tooltip']").tooltip(); });
    • merci de toutes les réponses que j'ai donné, je dois dire que j'ai probablement passé le moins de temps sur celui-ci. Mais pourtant, il a obtenu le plus de points.
    • Mais le problème est. il ne fonctionne pas avec chrome pour moi. puis j'ai fini par faire quelque chose jsfiddle.net/arunpjohny/4HptX/4 ce post stackoverflow.com/questions/18372632/...
    • Salahuddin, de sorte que son travail maintenant, une fois que vous avez mis à jour votre jquery? Vous posez une question ou était-ce une déclaration?
    • C'est juste une déclaration. j'ai utilisé jsfiddle.net/arunpjohny/4HptX/4 au lieu de cela étant donné que ce code ne fonctionne pas avec google chrome pour mon cas.
    InformationsquelleAutor Evan Larsen
  3. 26

    De travail avec BOOTSTRAP 3 : Court et Simple

    Check - 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(); 
});
    • Cela ne fonctionnera pas si vous voulez avoir plus pop fonctionnalité pour les données de chargement asynchrone (ajax, angulaire, etc), mais la réponse ci-dessous.
    InformationsquelleAutor Abhishek Goel
  4. 6

    J'ai eu à le faire sur les 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 changer ma charge les commandes:

    • jQuery
    • jQuery UI
    • Bootstrap
    • j'ai eu un problème similaire, a été de chargement de jquery ui après bootstrap, votre réponse m'a fait comprendre que le problème avec cela.
    • vérifier ceci pour la liste, 1. Le déclenchement de la Popovers , 2. Le positionnement de Popovers via des Attributs de Données
    InformationsquelleAutor Jonathan
  5. 5

    Pour une raison quelconque, la seule façon que j'ai pu obtenir mon code de travail est de passer deux ou trois choses. Si rien n'a fonctionné jusqu'à présent, veuillez donner un tourbillon de cette:

    $('body').popover({ 
selector: '[data-toggle="popover"]', 
trigger: 'hover',
placement: 'right'
});
    • C'est la seule chose qui a fonctionné pour moi depuis la liste élément peut ne pas être en vue pour commencer. Merci!
    InformationsquelleAutor santa
  6. 0

    Vous avez une erreur de syntaxe dans votre script, et, comme l'a noté 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 autre classe, ou d'utiliser un id="someidthatimakeup".

    • Ok, j'ai changé le code pour correspondre à ce que vous avez suggéré, je pense. Il ne fonctionne toujours pas. Je ne connais pas le Javascript et pourtant si, c'est un peu délicat. Je suis juste essayer d'obtenir les exemples qu'ils ont à travailler de la même façon.
    • La liste est un peu difficile, mais j'ai eu l'info-bulle de travailler comme ci-dessus.
    InformationsquelleAutor cssyphus
  7. 0

    Vous avez juste besoin d'activer les info-bulle:

    $('some id or class that you add to the above a tag').popover({
trigger: "hover" 
})
    • Non, ça va juste afficher la liste elle-même lorsque vous placez le pointeur dessus, pas de l'info-bulle.
    InformationsquelleAutor xXPhenom22Xx
  8. 0

    Si vous êtes à l'aide de Rails et ActiveAdmin, cela va être votre problème:
    https://github.com/seyhunak/twitter-bootstrap-rails/issues/450
    Fondamentalement, un conflit avec active_admin.js

    C'est la solution:
    https://stackoverflow.com/a/11745446/264084 (Karen réponse)
    tldr: Déplacer active_admin actifs dans le "vendeur" répertoire.

    InformationsquelleAutor Arcolye