Bootstrap-Tooltips funktionieren nicht

260

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
2
Der Tooltip wird in der Datei application.js im Beispiel twitters initiiert. Kannst du dein HTML posten? Ich möchte einen Blick darauf werfen, wie Sie das Skript initialisieren.
— Andres Ilich
2
Ahhhhh .... das habe ich beim ersten Kommentar ignoriert. codeSollte dies auch funktionieren: <a href="#" rel="tooltip" title="Ein netter Tooltip" class="tooltip-test"> Test </a> <br> <script> // Tooltip-Demo $ (' .tooltip-test '). tooltip () </ script>
— Mike Bartlett
1
Vergessen Sie nicht, einen Selektor an die Tooltip-Optionen zu übergeben,$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich
Danke Andres. Eigentlich schien ich den Selektor dort nicht zu brauchen, ich denke, das liegt daran, dass die Klasse des a als Tooltip-Test bezeichnet wird.
— Mike Bartlett
3
Ohne die Auswahloption funktioniert der Tooltip für mich nicht. Hier ist eine Demo, die ich erstellt habe: jsfiddle.net/VXctp , versuchen Sie es ohne die Auswahl .
— Andres Ilich

Antworten:

276

Zusammenfassend: Aktivieren Sie Ihre Tooltips mit jQuery-Selektoren

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

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.

— Manuel Ebert
quelle
13
Für diejenigen, die mit Rails arbeiten, ist dies bereits in bootstrap.js.coffeewith definiert $(".tooltip").tooltip(). Stellen Sie einfach sicher, dass Sie //= require bootstrapin Ihrem enthalten sind application.js.
— Slhck
6
Durch Hinzufügen der Klasse .tooltip zu einem beliebigen Element werden die QuickInfos für mich beschädigt. Der Inhalt des Elements mit der Klasse .tooltip wird ausgeblendet und der Tooltip wird angezeigt, wenn ich das versteckte Element mit der Maus gefunden habe. Die Verwendung eines anderen Selektors oder Klassennamens funktioniert einwandfrei. \
— Leonel Galán
4
@Leito das ist richtig, Bootstrap definiert Stile für .tooltipund standardmäßig sind sie unsichtbar. Sie können das relAttribut oder eine andere Klasse jedoch als Selektor verwenden.
— Manuel Ebert
3
Ja, Sie benötigen sowohl das HTML-Markup als auch die JS-Selektoren. Dies sind keine alternativen Möglichkeiten zum Anwenden von QuickInfos.
— ATSiem
1
Einige versuchen möglicherweise, einen Tooltip in einem Modal anzuzeigen, und dies funktioniert nicht in allen Bootstrap-Versionen. Wenn Sie es auf einer normalen Seite versuchen, nicht auf einer modalen, und es funktioniert, dann wissen Sie, dass dies das Problem ist.
— mjnissim
212

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

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

Hoffe das hilft!

— Marcus Hoelscher
quelle
20
Vielen Dank! Das hat bei mir funktioniert. Irgendwie haben die anderen Lösungen auf dieser Seite bei mir nicht funktioniert.
— Roman
1
Ich bin bei Roman. Diese Lösung funktioniert auch mit den Bootwatch-CSS-Varianten.
— DaveCS
Das hat bei mir funktioniert. Nichts anderes hat es ins Leben gerufen, bis ich es versuchte. Vielen Dank!
— BlakePetersen
1
Das hat auch bei mir funktioniert. Irgendeine Idee warum $ ('[data-toggle = "tooltip"]'). Tooltip ({'platzierung': 'top'}); funktioniert nicht?
— ZeroCool
Danke, das hat bei mir funktioniert. Stellen Sie einfach sicher, dass Sie den Code zwischen <script> -Tags einfügen, nachdem Sie die JQuery-Bibliothek geladen haben.
— GeraldScott
31

Sie benötigen nicht alle js-Dateien separat

Verwenden Sie einfach die folgenden Dateien, wenn Sie alle Bootstrap-Funktionen verwenden möchten:

-bootstrap.css
-bootstrap.js

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>Tag

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Das ist es...

— Harish Kumar
quelle
27

http://getbootstrap.com/javascript/#tooltips-usage

Opt-In-Funktionalität Aus Leistungsgründen sind die Tooltip- und Popover-Daten-Apis Opt-In-Funktionen

Sie müssen sie selbst initialisieren.

Eine Möglichkeit, alle QuickInfos auf einer Seite zu initialisieren, besteht darin, sie anhand ihres Datenumschaltattributs auszuwählen:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

Wenn Sie diesen Code in Ihr HTML einfügen, können Sie die Tooltips verwenden

Beispiele:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
— Max O.
quelle
2
Vielen Dank, dass Sie dieses Opt-In-Konzept geteilt haben! Lesen Sie es niemals aus Tutorials.
— dpp
Die Lösung für alle meine JQuery / Bootstrap-Tooltips whoas
— DJ Burb
Vorausgesetzt, der Link fehlt: Bitte schauen Sie auf getbootstrap.com/docs/4.1/components/tooltips
— Guillaume Husta
20

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:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— Amir Soleymani
quelle
Dies war die einzige Lösung, die für mich funktioniert hat. Ich verwende data-original-title = "{{someAngularJSVar}}", um den Titel zu aktualisieren, und er funktioniert einwandfrei.
— WKara
19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

Dieser ist Arbeit für mich.

— Igor Shvydok
quelle
1
Dieser Vorschlag hat auch für mich perfekt funktioniert. Mir hat es gefallen, weil es einfach und elegant ist. Sie können weiterhin Bootstrap- Standards verwenden, als ob das Plugin standardmäßig initiiert worden wäre, wie dies bei Dropdown- und Tab-Elementen der Fall ist. Ich habe das von @Igor vorgeschlagene JS zu einer neuen Datei hinzugefügt und es in die ursprüngliche Datei bootstrap.js gebündelt
— Iago Rodríguez-Quintana
14

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:

$(document.body).tooltip({ selector: "[title]" });

Beachten Sie, dass ich titleanstelle von rel=titleoder als Selektor verwende data-title. Dies hat den Vorteil , dass es viele anderen Elemente angewandt werden kann (das relist 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.

— Shital Shah
quelle
Ich kämpfe mit diesem, weil die dynamische Generation mehrere Ebenen tief geht. Der href-Wert ist dynamisch generierter Inhalt und die resultierende div-ID basiert auf der Artikelnummer, die dem href-Wert entspricht. Wenn ich also eine Seite mit Links vom Artikeltyp A habe, dann habe ich eine Liste von Artikeln a-1, Artikel a-2, Artikel a-3. Jeder dieser Links verweist auf die einzelne Seite des Artikels, aber ich möchte Der Tooltip-Inhalt zum Anzeigen von dynamischem Inhalt beim Hover, sodass der Benutzer sich ein Bild von dem Element machen kann, bevor er auf den vollständigen Link klickt.
— Melanie Sumner
Das war am hilfreichsten. Ich hatte den Tooltip so eingestellt, dass er an ein Symbol gebunden wird, und die Symbolbibliothek wurde asynchron geladen, sodass sie nicht gebunden werden konnte. Es war so seltsam, weil es funktionieren würde, wenn ein Klassenselektor verwendet würde, aber keine ID. Danke für Ihre Hilfe!
— Nick Woodhams
14

Dies ist der einfachste Weg. Setzen Sie dies einfach vor </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Schauen Sie sich die Beispiele in der Bootstrap-Dokumentation zu Tooltips an .

Beispielsweise: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— Marcos Cassiano
quelle
2
Bitte schließen Sie das Typattribut ... das Bearbeiten eines einzelnen Tippfehlers ist eine PITA: S
— Mohd Abdul Mujib
10

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.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Dann benötigen Sie folgenden Javascript-Code, um Popover zu aktivieren:

$('.popovers-to-be-activated').popover();

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:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Mayank Jaiswal
quelle
5

Im Kopfbereich müssen Sie zuerst den folgenden Code hinzufügen

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Dann müssen Sie im Hauptteil den folgenden Code schreiben

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— Rush.2707
quelle
4

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.

— Harish Kumar
quelle
3

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! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— Karthik
quelle
3
In diesem Fall wurde das DOM noch nicht geladen, sodass nicht alle Elemente auf der Seite vorhanden sind. Wickeln Sie den Code oben in$(function() { ... });
— Johnml
3

Wenn die Verwendung des Tooltips mit Rails + Haml viel einfacher ist, gehen Sie einfach wie folgt vor:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

Fügen Sie einfach die folgende Zeile am Ende des Elements hinzu.

:rel => "tooltip", :title => "Referential Guide"
— Andres Calle
quelle
Ich hatte wirklich gehofft, dass das für mich funktionieren würde, aber leider nicht.
— Turboladen
Jetzt bin ich mehr in Djanto als in Rails, aber wenn Sie Ihren Code einfügen, könnte ich versuchen, Ihnen einen Tipp zu geben.
— Andres Calle
3

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.

— Dieter
quelle
3

Ich habe gerade hinzugefügt:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

unter bootstrap.min.js und es funktioniert.

— Andy.sin
quelle
3

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:

  • Die Reihenfolge der enthaltenen Skripte
  • Überprüfen Sie, ob Sie versuchen, entfernte HTML-Elemente zu initialisieren
  • Überprüfen Sie, ob Sie versuchen, Methoden in JS-Dateien aufzurufen, die Sie nicht mehr einschließen

  • Ü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).

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

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:

<span class="badge badge-sm badge-plain">Admin Mode</span>

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

<span class="badge badge-sm badge-plain">Admin Mode</span>

NACH

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALIZER

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

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:

    <script src="/Scripts/app/inspinia.js" />

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:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

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-demoim classAttribut nach HTML-Elementen mit und ruft dann die tooltip()Methode auf, um alle untergeordneten Elemente zu initialisieren , für die das Attribut data-toggle="tooltip"definiert ist.

Für unser Beispiel Abzeichen, legt ein äußeres Element um sie (wie ein <div>oder <span>) , die hat class="tooltip-demo", dann die data-toggle, data-placementund titleAttribute 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

<span class="badge badge-sm badge-plain">Admin Mode</span>

NACH

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

INITIALIZER

None

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

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

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 im classAttribut verwenden, um Ihre QuickInfo-Elemente zu identifizieren. Dadurch wird verhindert, dass Ihr Tooltip-Initialisierer von INSPINIA betroffene Elemente stört. In unserem Beispiel verwenden wir standalone-tt:

VOR

<span class="badge badge-sm badge-plain">Admin Mode</span>

NACH

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALIZER

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— Mike Stillion
quelle
2

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

— chri_chri
quelle
2

Sie müssen den Tooltip Javascript nach dem HTML- Code einfügen . so was :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Oder verwenden Sie $ (document) .ready: 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

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.

— Zoomen
quelle
2

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.

I have added a jsfiddle example

Beispiel

— Shawn Vader
quelle
1

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:

  $('[data-toggle="tooltip"]').tooltip()
— Rahil Ahmad
quelle
0

Fügen data-toggle="tooltip"Sie mit einem Tooltip beliebige Elemente hinzu.

— Calum Childs
quelle
0

Sie müssen Folgendes tun. Ergänzen Sie die

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

Code irgendwo auf Ihrer Seite (vorzugsweise im <head>Abschnitt).

data-toggle: "tooltip"Fügen Sie auch alles hinzu , was Sie damit aktivieren möchten.

— Calum Childs
quelle
0

Sie können Popper.js verwenden

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

Und rufen Sie die Tooltip-Funktion auf:

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— Mohsen Newtoa
quelle
-2

Schnelle und leichtere Alternative zum Bootstrap-Tooltip-Plugin:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

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.

— jdisla
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.