Bootstrap 3.0 Popovers und Tooltips

84

Ich bin neu in Bootstrap und habe Probleme, die Popover- und Tooltip-Funktionen zum Laufen zu bringen. Ich hatte kein Problem mit den Dropdowns und Modellen, aber mir scheint etwas für das Popover und die Tooltips zu fehlen.

Es werden QuickInfos angezeigt, die jedoch nicht wie die Bootstrap-Beispiele gestaltet und angeordnet sind. Und der Popover funktioniert überhaupt nicht.

Bitte schauen Sie und lassen Sie 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>
javascript jquery css twitter-bootstrap user2560895
quelle
Ich habe vor ein paar Minuten die gleiche Frage gestellt und auch BS3 verwendet, wobei alles andere wie Modals und Tabs funktioniert, aber keine Tooltips oder Popovers ... werden Sie aktualisieren, falls ich etwas finde.
xXPhenom22Xx
Für Popover sind Optionen nicht definiert
Cybermaxs
Im Moment habe ich nur versucht, das Standardverhalten zu erhalten, aber ich bin daran interessiert, es beim Hover anstatt beim Klicken anzuzeigen, aber das war der nächste. Muss ich noch etwas für Optionen eingeben?
user2560895
Der obige Code ist der, den ich derzeit verwende und der immer noch nicht funktioniert. Irgendwelche Vorschläge? Habe ich etwas in der falschen Reihenfolge oder so?
user2560895

Antworten:

147

Es stellt sich heraus, dass Evan Larsen die beste Antwort hat . Bitte stimmen Sie seiner Antwort zu (und / oder wählen Sie sie als die richtige Antwort aus) - sie ist brillant.

JsFiddle hier arbeiten

Mit Evans Trick können Sie alle Tooltips mit einer Codezeile instanziieren:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

Sie werden sehen, dass alle QuickInfos in Ihrem langen Absatz funktionierende QuickInfos mit nur dieser einen Zeile enthalten.

Im jsFiddle-Beispiel (Link oben) habe ich auch eine Situation hinzugefügt, in der ein Tooltip (über die Schaltfläche Anmelden) standardmäßig aktiviert ist. Außerdem wird der Tooltip-Code der Schaltfläche in jQuery hinzugefügt, nicht im HTML-Markup.

Popovers tun das gleiche wie die Tooltips arbeiten:

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

Und da hast du es! Endlich Erfolg.

Eines der größten Probleme beim Herausfinden dieses Materials war, dass Bootstrap mit jsFiddle funktioniert ... Folgendes müssen Sie tun:

  1. Referenz für Twitter Bootstrap CDN erhalten Sie hier: http://www.bootstrapcdn.com/
  2. Fügen Sie jeden Link in den Editor ein und entfernen Sie ALLE außer der URL. Zum Beispiel:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. Öffnen Sie in jsFiddle auf der linken Seite das Dropdown-Menü Akkordeon für externe Ressourcen
  4. Fügen Sie jede URL ein und drücken Sie nach jedem Einfügen das Pluszeichen
  5. Öffnen Sie nun das Akkordeon-Dropdown-Menü "Frameworks & Extensions" und wählen Sie jQuery 1.9.1 (oder was auch immer ...) aus.

JETZT bist du bereit zu gehen.

Cssyphus
quelle
Warum ist der Trigger in der jsFiddle nicht von einfachen Anführungszeichen umgeben, sondern von der Platzierung?
HPWD
Es gibt keinen guten Grund, ich habe es einfach verpasst. Aber es scheint zu funktionieren. Vielleicht brauchen Einzelwortschlüssel die Anführungszeichen nicht - manchmal sind sie nicht erforderlich - trotzdem setze ich sie normalerweise ein.
cssyphus
das klingt für mich logisch. Danke fürs klarstellen.
HPWD
4
das klingt für mich nach Kauderwelsch. Ha! musste es nur sagen;)
Evan Larsen
Können Sie diese Methode in Relativität zu einem bestimmten Container verwenden? Alle Tooltips oder Popover in einem bestimmten Container instanziieren?
Michael Ecklund
231

Ich verwende dies auf allen meinen Seiten, um den Tooltip zu aktivieren

$(function () { $("[data-toggle='tooltip']").tooltip(); });
Evan Larsen
quelle
4
danke, von all den Antworten, die ich gegeben habe, muss ich sagen, dass ich wahrscheinlich die geringste Zeit damit verbracht habe. Aber irgendwie hat es die meisten Punkte vergeben.
Evan Larsen
Aber das Problem ist. Bei mir funktioniert es nicht mit Chrom. dann habe ich etwas getan jsfiddle.net/arunpjohny/4HptX/4 von diesem Beitrag stackoverflow.com/questions/18372632/…
Md. Salahuddin
@Md Salahuddin, also funktioniert es jetzt, sobald Sie Ihre jquery aktualisiert haben? Stellen Sie eine Frage oder war das eine Aussage?
Evan Larsen
1
Es ist nur eine Aussage. Ich habe stattdessen jsfiddle.net/arunpjohny/4HptX/4 verwendet, da dieser Code für meinen Fall nicht mit Chrome funktioniert hat.
Md. Salahuddin
27

Arbeiten mit BOOTSTRAP 3: Kurz und einfach

Überprü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(); 
});
Abhishek Goel
quelle
Dies funktioniert nicht, wenn Sie Pop-Over-Funktionen für Daten wünschen, die asynchron geladen werden (Ajax, Winkel usw.), aber die folgende Antwort wird.
Adrian Hedley
6

Ich musste es auf 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 ändere meine Ladebefehle wie folgt:

  • jQuery
  • jQuery-Benutzeroberfläche
  • Bootstrap
Jonathan
quelle
1
Ich hatte ein ähnliches Problem, lud jquery ui nach dem Bootstrap, Ihre Antwort ließ mich das Problem damit erkennen.
Hubson Bropa
Überprüfen Sie dies auf Popover, 1. Auslösen der Popover, 2. Positionierung von Popovers über
Datenattribute
5

Aus irgendeinem Grund konnte ich meinen Code nur durch Umschalten einiger Dinge zum Laufen bringen. Wenn bisher nichts für Sie funktioniert hat, geben Sie bitte einen Wirbel dazu:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
Santa
quelle
1
Dies ist das einzige, was für mich funktioniert hat, da das Popover-Element möglicherweise zunächst nicht angezeigt wird. Vielen Dank!
J. Titus
0

Sie haben einen Syntaxfehler in Ihrem Skript und müssen, wie von xXPhenom22Xx angegeben, den Tooltip instanziieren.

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

Beachten Sie, dass ich Ihre Klasse "BTN-Gefahr" verwendet habe. Sie können eine andere Klasse erstellen oder eine verwenden id="someidthatimakeup".

Cssyphus
quelle
Ok, ich glaube, ich habe den Code so geändert, dass er Ihren Vorschlägen entspricht. Es funktioniert immer noch nicht. Ich kenne Javascript noch nicht, daher ist dies etwas schwierig. Ich versuche nur, die Beispiele zu finden, die auf die gleiche Weise funktionieren müssen.
user2560895
Das Popover ist etwas schwierig, aber ich habe den Tooltip eins bekommen, um wie oben zu funktionieren.
Cssyphus
0

Sie müssen nur den Tooltip aktivieren:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
xXPhenom22Xx
quelle
Nein, das Popover wird nur angezeigt, wenn Sie mit der Maus darüber fahren, nicht der Tooltip.
CpnCrunch