Ich werde hier verrückt.
Ich habe folgendes HTML:
<a href="#" rel="tooltip" title="A nice tooltip">test</a>
Und der Tooltip im Bootstrap-Stil wird nicht angezeigt, sondern nur ein normaler Tooltip.
Bootstrap.css funktioniert einwandfrei und ich kann die Klassen dort sehen
Ich habe alle relevanten JS-Dateien am Ende meiner HTML-Datei:
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
Ich habe mir die Quelle des Bootstrap-Beispiels angesehen und kann dort nichts sehen, was den Tooltip initiiert. Ich denke also, es sollte einfach funktionieren, oder fehlt mir hier etwas Wichtiges?
Ich habe Modalitäten und Warnungen und andere Dinge, die gut funktionieren, also bin ich kein totaler Idiot;)
Vielen Dank für jede Hilfe!
twitter-bootstrap
Mike Bartlett
quelle
quelle
code
Sollte dies auch funktionieren: <a href="#" rel="tooltip" title="Ein netter Tooltip" class="tooltip-test"> Test </a> <br> <script> // Tooltip-Demo $ (' .tooltip-test '). tooltip () </ script>$('.tooltip-test').tooltip({ selector: "a" })
Antworten:
Zusammenfassend: Aktivieren Sie Ihre Tooltips mit jQuery-Selektoren
Tatsächlich müssen Sie den Attributselektor nicht verwenden. Sie können ihn für jedes Element aufrufen, auch wenn es kein
rel="tooltip"
Tag enthält.quelle
bootstrap.js.coffee
with definiert$(".tooltip").tooltip()
. Stellen Sie einfach sicher, dass Sie//= require bootstrap
in Ihrem enthalten sindapplication.js
..tooltip
und standardmäßig sind sie unsichtbar. Sie können dasrel
Attribut oder eine andere Klasse jedoch als Selektor verwenden.Nachdem das gleiche Problem aufgetreten war, stellte ich fest, dass diese Lösung funktioniert, ohne dass zusätzliche Tag-Attribute außerhalb der erforderlichen Bootstrap-Attribute hinzugefügt werden müssen.
HTML
JQuery
Hoffe das hilft!
quelle
Sie benötigen nicht alle js-Dateien separat
Verwenden Sie einfach die folgenden Dateien, wenn Sie alle Bootstrap-Funktionen verwenden möchten:
Beide finden Sie unter http://twitter.github.com
und schließlich in der
neuesten Version von jquery.js
Für Glyphicons benötigen Sie das Bild
glyphicons-halfings.png und / oder glyphicons-halfings-white.png (weiße Bilder),
die Sie in den Ordner / img / Ihrer Website hochladen müssen (oder), wo immer Sie möchten, aber das Ordnerverzeichnis im Bootstrap ändern .css
Für den Tooltip benötigen Sie das folgende Skript in Ihrem
<head> </head>
TagDas ist es...
quelle
http://getbootstrap.com/javascript/#tooltips-usage
Opt-In-Funktionalität Aus Leistungsgründen sind die Tooltip- und Popover-Daten-Apis Opt-In-Funktionen
Eine Möglichkeit, alle QuickInfos auf einer Seite zu initialisieren, besteht darin, sie anhand ihres Datenumschaltattributs auszuwählen:
Wenn Sie diesen Code in Ihr HTML einfügen, können Sie die Tooltips verwenden
Beispiele:
quelle
Ich weiß, dass dies eine alte Frage ist, aber da ich dieses Problem mit der neuen Version von Bootstrap hatte und es auf der Website nicht klar ist, können Sie den Tooltip wie folgt aktivieren.
Geben Sie Ihrem Element eine Klasse wie "Tooltip-Test".
Aktivieren Sie dann diese Klasse in Ihrem Javascript-Tag:
quelle
HTML
JQuery
Dieser ist Arbeit für mich.
quelle
Wenn Sie dies tun,
$("[rel='tooltip']").tooltip();
wie andere Antworten vorgeschlagen haben, aktivieren Sie QuickInfos nur für Elemente, die derzeit in DOM vorhanden sind. Das heißt, wenn Sie DOM ändern und später dynamischen Inhalt einfügen, funktioniert dies nicht. Dies ist auch viel weniger effizient, da der Ereignishandler für einzelne Elemente installiert wird, anstatt die JQuery-Ereignisdelegierung zu verwenden. Der beste Weg, um Bootstrap-Tooltips zu aktivieren, ist diese eine Codezeile, die Sie in das Dokument einfügen und vergessen können:Beachten Sie, dass ich
title
anstelle vonrel=title
oder als Selektor verwendedata-title
. Dies hat den Vorteil , dass es viele anderen Elemente angewandt werden kann (dasrel
ist angeblich für Dübel nur sein) und es funktioniert auch als „Rückfall“ für alten Browser.Beachten Sie auch, dass Sie kein
data-toggle="tooltip"
Attribut benötigen , wenn Sie den obigen Code verwenden.Bootstrap-Tooltips sind teuer, da Sie Mausereignisse für jedes der Elemente verarbeiten müssen. Dies ist der Grund, warum sie es nicht standardmäßig aktiviert haben. Wenn Sie sich also jemals dazu entschließen, die obige Zeile zu kommentieren, funktioniert Ihre Seite weiterhin, wenn Sie das Titelattribut verwenden.
Wenn Sie das title-Attribut nicht verwenden dürfen, würde ich die Verwendung einer reinen CSS-Lösung wie Hint.css empfehlen oder http://csstooltip.com überprüfen, für das überhaupt kein JavaScript-Code erforderlich ist.
quelle
Dies ist der einfachste Weg. Setzen Sie dies einfach vor
</body>
:Schauen Sie sich die Beispiele in der Bootstrap-Dokumentation zu Tooltips an .
Beispielsweise:
quelle
Tooltip und Popover sind NICHT nur CSS-Plugins wie Dropdown oder Fortschrittsbalken. Um Tooltips und Popover zu verwenden, MÜSSEN Sie diese mit jquery aktivieren (Javascript lesen).
Nehmen wir also an, wir möchten, dass ein Popover beim Klicken auf eine HTML-Schaltfläche angezeigt wird.
Dann benötigen Sie folgenden Javascript-Code, um Popover zu aktivieren:
Tatsächlich aktiviert der obige Javascript-Code das Popover für alle HTML-Elemente mit der Klasse "Zu aktivierende Popovers".
Fügen Sie natürlich das obige Javascript in den DOM-fähigen Rückruf ein, um alle Popover zu aktivieren, sobald DOM bereit ist:
quelle
Im Kopfbereich müssen Sie zuerst den folgenden Code hinzufügen
Dann müssen Sie im Hauptteil den folgenden Code schreiben
quelle
Wenn immer noch nicht alles gelöst ist Verwenden Sie die neueste JQuery-Bibliothek. Sie benötigen keinen der JQuery-Selektoren, wenn Sie den neuesten Bootstrap 2.0.4 und JQuery-1.7.2.js verwenden
Benutz einfach
rel="tooltip" title="Your Title" data-placement=" "
Verwenden Sie oben / unten / links / rechts in der Datenplatzierung nach Ihren Wünschen.
quelle
Ich habe jquery und bootstrap-tooltip.js im Header hinzugefügt. Das Hinzufügen dieses Codes in der Fußzeile funktioniert bei mir! aber wenn ich den gleichen Code in den Header einfüge, funktioniert es nicht!
quelle
$(function() { ... });
Wenn die Verwendung des Tooltips mit Rails + Haml viel einfacher ist, gehen Sie einfach wie folgt vor:
Fügen Sie einfach die folgende Zeile am Ende des Elements hinzu.
quelle
In meinem speziellen Fall hat es nicht funktioniert, weil ich zwei Versionen von jQuery aufgenommen habe. Eine für Bootstrap, aber eine andere (eine andere Version) für Google Charts.
Wenn ich das Laden von jQuery für die Diagramme entferne, funktioniert es einwandfrei.
quelle
Ich habe gerade hinzugefügt:
unter bootstrap.min.js und es funktioniert.
quelle
Lassen Sie uns anhand eines Beispiels zeigen, wie die QuickInfos zu jedem HTML-Element in Ihrem Dokument hinzugefügt werden können.
HINWEIS:
Wenn diese Tooltip-Beispiele beim Einfügen in Ihre Seite nicht funktionieren, liegt ein anderes Problem vor. Sie müssen sich Dinge ansehen wie:
Überprüfen Sie, ob Sie die JS-Datei einschließen, die die von Ihnen benötigten Funktionen bietet (nicht nur für QuickInfos, sondern für alle Komponenten, die Sie auf der Seite verwenden).
Das Versagen eines der oben genannten Elemente kann (und wird häufig) verhindern, dass Javascript geladen und / oder ausgeführt wird, und das hält alles schön und kaputt.
ARBEITSBEISPIELE
Angenommen, Sie haben ein Abzeichen und möchten, dass es einen Tooltip anzeigt, wenn der Benutzer darüber schwebt.
Original HTML:
Einfache Bootstrap-Tooltips
Wenn Sie QuickInfos für ein HTML-Element erstellen und einfache Bootstrap-QuickInfos verwenden, sind Sie dafür verantwortlich, die Tooltip-Initialisierer mit Ihrem eigenen JavaScript-Code aufzurufen.
VOR
NACH
INITIALIZER
Tooltips für Bootstrap-Vorlagen (z. B. INSPINIA)
Wenn Sie eine Bootstrap-Vorlage (z. B. INSPINIA) verwenden, fügen Sie ein unterstützendes Skript zur Unterstützung der Vorlagenfunktionen hinzu:
Im Fall von INSPINIA initialisiert das enthaltene Skript automatisch alle QuickInfos, indem es den folgenden Javascript-Code ausführt, wenn das Dokument vollständig geladen ist:
Aus diesem Grund müssen Sie die INSPINIA-Tooltips NICHT selbst initialisieren. Sie müssen Ihre Elemente jedoch auf eine bestimmte Weise formatieren. Der Initializer sucht
tooltip-demo
imclass
Attribut nach HTML-Elementen mit und ruft dann dietooltip()
Methode auf, um alle untergeordneten Elemente zu initialisieren , für die das Attributdata-toggle="tooltip"
definiert ist.Für unser Beispiel Abzeichen, legt ein äußeres Element um sie (wie ein
<div>
oder<span>
) , die hatclass="tooltip-demo"
, dann diedata-toggle
,data-placement
undtitle
Attribute für den tatsächlichen Tooltip innerhalb des Elements , das die Plakette ist. Ändern Sie den ursprünglichen HTML-Code von oben, um ungefähr so auszusehen:VOR
NACH
INITIALIZER
Beachten Sie, dass für alle untergeordneten Elemente innerhalb des
<span class="tooltip-demo">
Elements der Tooltip ordnungsgemäß vorbereitet ist. Ich könnte drei untergeordnete Elemente haben, die alle QuickInfos benötigen, und sie in einem Container platzieren.Mehrere Elemente mit jeweils einem Tooltip
Die beste Verwendung hierfür wäre, das
class="tooltip-demo"
zu einem<td>
oder einem äußersten<div>
oder hinzuzufügen<span>
.Einfache Bootstrap-Tooltips bei Verwendung einer Vorlage
Wenn Sie INSPINIA verwenden, aber keine zusätzlichen äußeren
<div>
oder<span>
Tags zum Erstellen von QuickInfos hinzufügen möchten , können Sie Standard-Bootstrap-QuickInfos verwenden, ohne die Vorlage zu beeinträchtigen. In diesem Fall sind Sie dafür verantwortlich, die Tooltips selbst zu initialisieren. Sie sollten jedoch einen benutzerdefinierten Wert imclass
Attribut verwenden, um Ihre QuickInfo-Elemente zu identifizieren. Dadurch wird verhindert, dass Ihr Tooltip-Initialisierer von INSPINIA betroffene Elemente stört. In unserem Beispiel verwenden wirstandalone-tt
:VOR
NACH
INITIALIZER
quelle
Wenn Sie Ihr HTML erstellen, das den Tooltip mit Javascript enthält, und ihn dann in das Dokument einfügen, müssen Sie das Popover / den Tooltip aktivieren, nachdem Sie den HTML-Code in das Dokument eingefügt haben, nicht beim Laden des Dokuments ...
quelle
Sie müssen den Tooltip Javascript nach dem HTML- Code einfügen . so was :
Oder verwenden Sie $ (document) .ready:
Der Tooltip funktioniert nicht, da Sie den Tooltip-HTML-Code vor das Javascript stellen , sodass sie nicht wissen, ob für den Tooltip ein Javascript vorhanden ist. Meiner Meinung nach wird das Skript von oben nach unten gelesen.
quelle
Ich hatte ein ähnliches Problem, insbesondere wenn Sie in einem Schaltflächencontainer wie einem vertikalen Schaltflächencontainer ausgeführt werden. In diesem Fall müssen Sie den Container als "Körper" festlegen.
Beispiel
quelle
Legen Sie Ihren Code in das Dokument bereit
In meinem Fall fehlten mir auch die Tooltip-CSS-Klassen unter http://twitter.github.com/bootstrap/assets/css/bootstrap.css, also vergiss das nicht.
quelle
Aus Bootstrap- Dokumenten in QuickInfos
Tooltips sind aus Leistungsgründen aktiviert. Sie müssen sie daher selbst initialisieren. Eine Möglichkeit, alle QuickInfos auf einer Seite zu initialisieren, besteht darin, sie anhand ihres Datenumschaltattributs auszuwählen:
quelle
Fügen
data-toggle="tooltip"
Sie mit einem Tooltip beliebige Elemente hinzu.quelle
Sie müssen Folgendes tun. Ergänzen Sie die
Code irgendwo auf Ihrer Seite (vorzugsweise im
<head>
Abschnitt).data-toggle: "tooltip"
Fügen Sie auch alles hinzu , was Sie damit aktivieren möchten.quelle
Sie können Popper.js verwenden
Und rufen Sie die Tooltip-Funktion auf:
quelle
Schnelle und leichtere Alternative zum Bootstrap-Tooltip-Plugin:
HTML:
CSS:
JSCRIPT:
Beschriftung / Text muss in einem Wrapper der Klasse "mytooltip" enthalten sein. Dieser Wrapper muss eine ID haben.
Nach der Beschriftung befindet sich der QuickInfo-Text in einem Div der Klasse "mytooltiptext" und der ID, die aus der ID des übergeordneten Wrappers + "_tttext" besteht. Andere Optionen für Selektoren können verwendet werden.
Ich hoffe es hilft.
quelle