Popovers et info-bulles Bootstrap 3.0

84

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
source
Je viens de poster la même question il y a quelques minutes, en utilisant également BS3 avec tout le reste fonctionnant comme des modaux et des onglets, mais pas d'infobulles ou de popovers ... vous mettra à jour si je trouve quelque chose.
— xXPhenom22Xx
pour le popover, les options ne sont pas définies
— Cybermaxs
Pour l'instant, j'essayais simplement d'obtenir le comportement par défaut, mais je suis intéressé à le faire apparaître en survol au lieu de cliquer, mais c'était le suivant. Dois-je encore ajouter quelque chose pour les options?
— user2560895
Le code ci-dessus est ce que j'utilise actuellement et il ne fonctionne toujours pas. Aucune suggestion? Est-ce que j'ai quelque chose dans le mauvais ordre ou quelque chose?
— user2560895

Réponses:

147

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:

  1. Obtenez des références pour le CDN Twitter Bootstrap à 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 de l'accordéon Ressources externes
  4. Collez chaque URL, en appuyant sur le signe plus après chaque collage
  5. Maintenant, ouvrez la liste déroulante de l'accordéon "Frameworks & Extensions", et sélectionnez jQuery 1.9.1 (ou celui qui ...)

Maintenant, vous êtes prêt à partir.

— cssyphus
source
dans jsFiddle, pourquoi le déclencheur n'est-il pas entouré de guillemets simples mais le placement l'est-il?
— HPWD
Il n'y a pas de bonne raison, je l'ai juste ratée. Mais cela semble fonctionner. Peut-être que les clés à un seul mot n'ont pas besoin des guillemets - parfois elles ne sont pas obligatoires - néanmoins, je les mets généralement.
— cssyphus
cela me semble logique. Merci de clarifier.
— HPWD
4
cela me semble du charabia. Ha! juste eu à le dire;)
— Evan Larsen
Pouvez-vous utiliser cette méthode en relativité avec un conteneur spécifique? Instancier toutes les info-bulles ou popovers dans un conteneur spécifique?
— Michael Ecklund
231

J'utilise ceci sur toutes mes pages pour activer l'info-bulle

$(function () { $("[data-toggle='tooltip']").tooltip(); });
— Evan Larsen
source
4
merci, de toutes les réponses que j'ai données, je dois dire que j'ai probablement passé le moins de temps sur celle-ci. Mais pourtant, il a accordé le plus de points.
— Evan Larsen
Mais le problème est. ça ne fonctionne pas avec chrome pour moi. puis j'ai fini par faire quelque chose jsfiddle.net/arunpjohny/4HptX/4 à partir de ce poste stackoverflow.com/questions/18372632/…
— Md. Salahuddin
@Md Salahuddin, donc ça marche maintenant, une fois que vous avez mis à jour votre jquery? Posez-vous une question ou était-ce une déclaration?
— Evan Larsen
1
C'est juste une déclaration. J'ai utilisé jsfiddle.net/arunpjohny/4HptX/4 à la place car ce code ne fonctionnait pas avec chrome pour mon cas.
— Md. Salahuddin
27

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(); 
});
— Abhishek Goel
source
Cela ne fonctionnera pas si vous voulez avoir une fonctionnalité pop-over pour les données qui se chargent de manière asynchrone (ajax, angulaire, etc.) mais la réponse ci-dessous le sera.
— Adrian Hedley
6

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:

  • jQuery
  • jQuery UI
  • Amorcer
— Jonathan
source
1
J'ai eu un problème similaire, je chargeais jquery ui après bootstrap, votre réponse m'a fait réaliser le problème avec cela.
— hubson bropa
vérifiez ceci pour les popover, 1. Déclenchement des popovers, 2. Positionnement des popovers via les attributs de données
— shaijut
5

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'
});
— Père Noël
source
1
C'est la seule chose qui a fonctionné pour moi puisque l'élément popover n'est peut-être pas en vue au départ. Merci!
— J. Titus
0

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".

— cssyphus
source
Ok, j'ai changé le code pour correspondre à ce que vous avez suggéré, je pense. Cela ne fonctionne toujours pas. Je ne connais pas encore Javascript donc c'est un peu délicat. J'essaie simplement d'obtenir les exemples dont ils ont besoin pour fonctionner de la même manière.
— user2560895
Le popover est un peu difficile, mais je l'ai fait fonctionner comme ci-dessus.
— cssyphus
0

Il vous suffit d'activer l'info-bulle:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
— xXPhenom22Xx
source
Non, cela affichera simplement le popover lui-même lorsque vous le survolerez, pas l'info-bulle.
— CpnCrunch
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.