web-dev-qa-db-fra.com

Pourquoi ma popover Bootstrap ne fonctionne-t-elle pas?

J'essaie d'utiliser le Popst Bootstrap . J'ai donc copié le code exact de l'exemple sur mon site Web, ce qui ne fonctionne malheureusement pas. J'ai collé le code complet ci-dessous et créé un jsfiddle ici .

J'ai essayé de le mettre dans un conteneur d'amorçage et dans des lignes et des colonnes, mais rien ne semble fonctionner.

Est-ce que quelqu'un peut faire fonctionner ce violon? Tous les conseils sont les bienvenus!

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
javascripthtmlcsstwitter-bootstrappopover
7
kramer65

Vous avez oublié ceci: http://getbootstrap.com/javascript/#opt-in-functionality

Pour des raisons de performances, les info-bulles Tooltip et Popover data sont opt-in, ce qui signifie que 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:

$(function () {
    $('[data-toggle="popover"]').popover()
})
21
Seblor

Devrait ajouter le 

$(function () {   
  $('[data-toggle="popover"]').popover() 
});

exemple de travail ici

2
vamsikrishnamannem

Pour des raisons de performances, vous devriez initialiser Popover vous-même:

<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

Référence

Assurez-vous d’ajouter la bibliothèque jQuery avant d’amorcer.

jsFiddle

2
jmgross

Il vous manquait également un appel de fonction dans votre bibliothèque de violon et jquery 

J'ai ajouté des dépendances manquantes à votre exemple

vérifier le violon: https://jsfiddle.net/L41g98qx/9/

voici un popover appel de fonction  

$(function () {
  $('[data-toggle="popover"]').popover()
})

Le texte ci-dessous est copié de getbootstrap.com, voici ce qu'ils veulent dire sur le plugin popover

Fonction opt-in

Pour des raisons de performances, les info-bulles Tooltip et Popover data sont opt-in, ce qui signifie que vous devez les initialiser vous-même.

Une façon d'initialiser tous les popovers sur une page serait de les sélectionner Par leur attribut data-toggle: Copier

$(function () { $('[data-toggle="popover"]').popover() })

2
Nilesh Mahajan

Vous devez ajouter cette code dans <head> 

$(function () {
$('[data-toggle="popover"]').popover()
})
1
khurram
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

Cette méthode est obligatoire

$('#example').popover('show');

D&EACUTE;MO

1
sheshadri

vous pouvez ajouter un attribut id ou class dans la variable button et ensuite appeler la méthode popover sur ce bouton. Voici le violon qui travaille. http://jsfiddle.net/uqLor9ze/ .

Voici l'exemple de code de fiddle

 $('#pop').popover();
0
Kamran