Bootstrap popover ne fonctionne pas
Le bootstrap liste ne s'affiche pas ma page
Voici mon code HTML:
<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>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")
@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")
quelqu'un Peut-il me dire où est le problème?
PS: y a-t-il un moyen de faire fonctionner le popover sans avoir à écrire de code de script?
2 réponses
Opt-in fonctionnalité:
Pour des raisons de performance, les données Tooltip et Popover-apis sont opt-in, ce qui signifie que vous doit initialiser vous-même.
de Sorte que vous devez appeler .popover() manuellement en JavaScript comme ceci:
$("[data-toggle=popover]").popover();
Ou vous pouvez utiliser n'importe quel sélecteur vous voulez
Voici un exemple d'utilisation StackSnippets.
$("[data-toggle=popover]").popover();body {
padding: 50px;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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>Remarque:: Ceci est similaire à la réponse à Bootstrap info-bulle Ne S'Affiche Pas
bien que la réponse acceptée soit bonne, lors du traitement de popovers, veuillez faire attention aux situations avec double initialisation aussi bien (Tripoter exemple). Le JavaScript ci-dessous va échouer.
<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>
si vous double-initialisez et votre popover utilise des valeurs qui peuvent changer ou personnaliser le contenu, etc., vous serez dans un monde de souffrance:
$(function () {
$('#firstButton').popover({
container: "body",
html: true,
content: function () {
return '<div class="popover-message">' + $(this).data("message") + '</div>';
}
});
$('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
$('#secondButton').popover({
container: "body",
html: true,
content: function () {
return '<div class="popover-message">' + $(this).data("message") + '</div>';
}
});
});