wake-up-neo.com

Bootstrap 3.0 Popovers und Tooltips

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>
javascriptjquerycsstwitter-bootstrap
83
user2560895

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.

Arbeitet jsFiddle hier

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:

  1. Referenz für Twitter Bootstrap CDN erhalten Sie hier: http://www.bootstrapcdn.com/
  2. Fügen Sie jeden Link in den Notizblock 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 die Dropdown-Liste für externe Ressourcen
  4. Fügen Sie in jede URL ein und drücken Sie nach jedem Einfügen das Pluszeichen
  5. Öffnen Sie nun die Dropdown-Liste "Frameworks & Extensions" und wählen Sie jQuery 1.9.1 (oder was auch immer ...) aus.

JETZT bist du bereit zu gehen.

145
gibberish

Ich verwende dies auf allen meinen Seiten, um Tooltips zu aktivieren

$(function () { $("[data-toggle='tooltip']").tooltip(); });
228
Evan Larsen

Arbeiten mit BOOTSTRAP 3: Kurz und einfach

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(); 
});
26
Abhishek Goel

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:

  • jQuery
  • jQuery UI
  • Bootstrap
6
Jonathan

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'
});
5
santa

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

0
Arcolye

Sie müssen nur den Tooltip aktivieren:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
0
xXPhenom22Xx

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.

0
gibberish