Ich bin neu bei Bootstrap und habe Probleme, die Popover- und Tooltip-Funktionen zum Laufen zu bringen. Ich hatte keine Probleme mit den Dropdowns und Modellen, aber mir scheint etwas für den Popover und die Tooltips zu fehlen.
Es werden Tooltipps angezeigt, die jedoch nicht wie in den Bootstrap-Beispielen dargestellt werden. Und der Popover funktioniert überhaupt nicht.
Bitte schau nach und lass mich wissen, was mir fehlt.
<!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>
Es stellt sich heraus, dass Evan Larsen die beste Antwort hat . Bitte stimmen Sie seine Antwort (und/oder wählen Sie sie als richtige Antwort aus) - es ist brillant.
Mit Evans Trick können Sie alle Tooltips mit einer Codezeile instanziieren:
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
Sie werden sehen, dass alle Tooltips in Ihrem langen Absatz mit nur einer Zeile funktionieren.
Im jsFiddle-Beispiel (Link oben) habe ich außerdem eine Situation hinzugefügt, in der ein Tooltip (über die Schaltfläche Anmelden) standardmäßig aktiviert ist. Der Tooltip-Code wird der Schaltfläche in jQuery ADDED hinzugefügt, nicht im HTML-Markup.
Popovers do funktionieren genauso wie die Tooltips:
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});
Und da hast du es! Endlich Erfolg.
Eines der größten Probleme bei der Entwicklung dieses Problems bestand darin, dass Bootstrap mit jsFiddle funktioniert. Folgendes müssen Sie tun:
JETZT bist du bereit zu gehen.
Ich verwende dies auf allen meinen Seiten, um Tooltips zu aktivieren
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Prüfen Sie - 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();
});
Ich musste es am DOM fertig machen
$( 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
});
});
Und ändern Sie meine Ladebefehle in:
Aus irgendeinem Grund konnte ich meinen Code nur durch ein paar Dinge wechseln. Wenn bis jetzt noch nichts für Sie funktioniert hat, wenden Sie sich bitte an:
$('body').popover({
selector: '[data-toggle="popover"]',
trigger: 'hover',
placement: 'right'
});
Wenn Sie Rails und ActiveAdmin verwenden, wird dies Ihr Problem sein: https://github.com/seyhunak/Twitter-bootstrap-Rails/issues/450 Grundsätzlich ein Konflikt mit active_admin.js
Dies ist die Lösung: https://stackoverflow.com/a/11745446/264084 (Antwort von Karen) Tldr: Verschieben Sie active_admin-Assets in das Verzeichnis "vendor".
Sie müssen nur den Tooltip aktivieren:
$('some id or class that you add to the above a tag').popover({
trigger: "hover"
})
Sie haben einen Syntaxfehler in Ihrem Skript, und wie von xXPhenom22Xx festgestellt, müssen Sie den Tooltip instanziieren.
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').tooltip();
}); //END $(document).ready()
</script>
Beachten Sie, dass ich Ihre Klasse "btn-danger" verwendet habe. Sie können eine andere Klasse erstellen oder einen id="someidthatimakeup"
verwenden.