web-dev-qa-db-fra.com

Popstops Bootstrap 3.0 et infobulles

Bootstrap est nouveau pour moi et je ne parviens pas à faire fonctionner les fonctions popover et les info-bulles. Je n'ai eu aucun problème avec les menus déroulants et les modèles, mais il me manque quelque chose pour le popover et les info-bulles. 

Les info-bulles s'affichent, mais elles ne sont ni stylées ni localisées comme les exemples de bootstrap. Et le popover ne fonctionne pas du tout.

S'il vous plaît jeter un oeil et laissez-moi savoir 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>
javascriptjquerycsstwitter-bootstrap
83
user2560895

Il s'avère que Evan Larsen a la meilleure réponse . S'il vous plaît upvote sa réponse (et/ou sélectionnez-le comme la bonne réponse) - c'est brillant.

Travailler jsFiddle ici

En utilisant le truc 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 cette seule ligne.

Dans l'exemple jsFiddle (lien ci-dessus), j'ai également ajouté une situation dans laquelle 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.

Les Popovers do fonctionnent de la même manière que les info-bulles:

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

Et voila! Le succès enfin.

L'un des plus gros problèmes pour résoudre ce problème était de faire fonctionner bootstrap avec jsFiddle ... Voici ce que vous devez faire:

  1. Obtenez une référence pour Twitter Bootstrap CDN à partir d’ici: http://www.bootstrapcdn.com/
  2. Collez chaque lien dans le bloc-notes et supprimez TOUT sauf l'URL. Par exemple:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. Dans jsFiddle, sur le côté gauche, ouvrez la liste déroulante des ressources externes
  4. Coller dans chaque URL, en appuyant sur le signe plus après chaque collage
  5. Maintenant, ouvrez la liste déroulante "Frameworks & Extensions", et sélectionnez jQuery 1.9.1 (ou selon ce qui est ...)

Maintenant, vous êtes prêt à partir.

145
gibberish

J'utilise ceci sur toutes mes pages pour activer l'infobulle

$(function () { $("[data-toggle='tooltip']").tooltip(); });
228
Evan Larsen

Travailler avec BOOTSTRAP 3: court 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(); 
});
26
Abhishek Goel

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 changer mes ordres de chargement pour être:

  • jQuery
  • jQuery UI
  • Bootstrap
6
Jonathan

Pour une raison quelconque, le seul moyen pour que mon code fonctionne est de changer de système. Si rien n’a fonctionné pour vous jusqu’à présent, veuillez faire un tourbillon à ceci:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
5
santa

Si vous utilisez Rails et ActiveAdmin, votre problème sera le suivant: 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 ressources active_admin dans le répertoire "vendor".

0
Arcolye

Il vous suffit d'activer l'infobulle:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
0
xXPhenom22Xx

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 classe différente ou utiliser un id="someidthatimakeup".

0
gibberish