Bootstrap-Tooltip zeigt den Stil der QuickInfo nicht an, sondern nur Daten

7

Um Bootstrap die Tooltip-Funktion anzeigen zu lassen, habe ich genau wie Bootstrap DOC über Tooltips und deklariere mein Attribut und meine Eigenschaften. Wenn ich den Mauszeiger über den Text halte, werden die Daten Some tooltip text! angezeigt, da nur alt="" function vorhanden ist, aber nicht im Style, wie Bootstrap in ihrem Dokument erwähnt wird.

Schritte, die ich zur Lösung dieses Problems unternommen habe:

  1. Include tooltip.js von externem CDN
  2. aktiviere QuickInfo throw <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
  3. Fügen Sie Google API von jQuery hinzu (ich weiß, dass dies nicht erforderlich ist)
  4. Überprüfen Sie, ob die Seite das Bootstrap-CDN und externe (All Do!)
    5. lädt

Header-HTML-Markup

%Vor%

HTML-Markup

%Vor%

Hier ist ein Bild davon, wie es sich zeigt.

    
Xrait 05.08.2014, 19:12
quelle

7 Antworten

12

Hier ist eine Arbeitsvorlage für Sie. Meine Vermutungen darüber, was falsch war:

  1. jQuery muss immer vor bootstrap.js kommen.
  2. Wenn Sie keinen lokalen Server ausführen, müssen Sie den CDN-Adressen http:
    3. hinzufügen
  3. Sie haben möglicherweise versucht, den Tooltip in den head-Tags zu initialisieren. Problem ist, dass das Dokument wahrscheinlich nicht bereit war.

Folgendes funktioniert gut.

HTML:

%Vor%     
jme11 05.08.2014, 19:35
quelle
11

Denken Sie auch daran, dass Bootstrap-Tooltip die jQuery-Benutzeroberfläche nicht mag (es gibt einige Konflikte zwischen Namen und "Tooltip" ist einer davon).

Die Lösung ändert die Ladereihenfolge des Skripts: jQuery UI zuerst, bootstrap.js nach.

    
1_bug 29.03.2017 11:35
quelle
6

Ihr Problem ist mehr als wahrscheinlich, dass Sie die Tooltip nicht korrekt initialisiert haben. Werfen Sie einen Blick auf diese bootply

Die Dokumente lauten wie folgt:

HTML :

%Vor%

Jquery :

%Vor%
  1. Denken Sie daran, dass Sie nur bootstrap.min.css und bootstrap.js benötigen, damit die QuickInfo korrekt funktioniert.
  2. Denken Sie daran, Skripte und Stylesheets mit absoluten URLs zu laden (fügen Sie / vor Pfad hinzu).
  3. bootstrap hängt von jquery ab, lade zuerst jquery.
Jordan.J.D 05.08.2014 19:35
quelle
1

Fügen Sie diesen Code am Ende Ihres HTML-Codes hinzu. Ich habe ihn benötigt, um den Tooltip zu aktivieren. Fügen Sie class="ttop" zu Ihren Tooltips im HTML-Code hinzu.

%Vor%     
DivineChef 05.08.2014 19:35
quelle
1

In meinem Fall mit AngularJS wurden sogar alle css / js-Skripte ordnungsgemäß sequenziert / aufgerufen, aber es wurde immer noch nicht angezeigt.

Das Problem war, dass es von einem Tag mit "ng-if" -Attribut stammt. Nachdem ich es außerhalb dieses Tags platziert habe, funktioniert es gut.

Vielleicht gibt es eine leichte Verzögerung mit AngularJS, die die Elemente mit "ng-if" rendert, während jquery den Tooltip initialisiert.

    
babidi 19.09.2017 03:59
quelle
0

Sie müssen den Tooltip wie folgt initialisieren:

%Vor%     
Four 04.09.2017 08:35
quelle
0

Wenn Sie popper.js mit Bootstrap 4 verwenden, statt:

%Vor%

Verwenden Sie die .js im UMD-Verzeichnis:

%Vor%     
Exel Gamboa 09.11.2017 19:38
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Integrieren Sie das Visual Studio Online Git Repository in Android Studio 1.0.2