Bootstrap-Tooltip-Plugin

A Tooltip ist ein kleines Popup, das erscheint, wenn ein Cursor über einem Symbol, Bild, Hyperlink oder einem anderen Element in einer grafischen Benutzeroberfläche positioniert wird. Dabei handelt es sich um eine kleine, eingerahmte Textnachricht, die einige Details zum Text bereitstellt, wenn der Mauszeiger über einem bestimmten Text schwebt. Tooltips sind für neue Benutzer hilfreich, da sie es dem Benutzer ermöglichen, mehr über jedes Objekt zu erfahren, indem er mit der Maus darüber fährt.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Wir können Tooltips auf zwei Arten erstellen:

  • Über Datenattribute
  • Über JavaScript

Bootstrap-Tooltip über Datenattribute

Mithilfe des Attributs können wir einen Bootstrap-Tooltip erstellen data-toggle=“tooltip“ innerhalb des Ankerelements. Wenn wir beispielsweise einen Tooltip auf der linken Seite anzeigen möchten, verwenden wir das Attribut data-placement=“left“ und ähnlich für die rechte, obere und untere Position. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
   $(function(){
      $("[data-toggle="tooltip"]").tooltip();
   });
</script>
</head>
<body>
<div  >
<h2>Tooltip for Buttons</h2><br>
<button type="button"   data-toggle="tooltip"
data-placement="left" title="Left Tooltip">Tooltip on left</button>

<button type="button"   data-toggle="tooltip"
data-placement="top" title="Top Tooltip">Tooltip on top</button>

<button type="button"   data-toggle="tooltip"
data-placement="bottom" title="Bottom Tooltip">Tooltip on bottom</button>

<button type="button"   data-toggle="tooltip"
data-placement="right" title="Right Tooltip">Tooltip on right</button>
</body>
</body>
</html>
  • Führen Sie die Demo zu Bootstrap-Tooltip-Datenattributen aus

Beispiel für Bootstrap-Tooltip-Datenattribute

Bootstrap-Tooltip über JavaScript

Es ist auch möglich, Tooltips oben, links, rechts und unten an einem Element anzuzeigen, indem Sie Javascript-Code verwenden, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $("#top").tooltip({
      placement:'top'
   });
   $("#right").tooltip({
         placement:'right'
   });
   $("#bottom").tooltip({
         placement:'bottom'
   });
   $("#left").tooltip({
         placement:'left'
   });
});
</script>
</head>
<body>
<div  >
<h2>Tooltip using JavaScript</h2><br>

<button type="button"   data-toggle="tooltip" id="top"
data-placement="top" title="Top Tooltip">Tooltip on top</button>

<button type="button"   data-toggle="tooltip" id="right"
data-placement="right" title="Right Tooltip">Tooltip on right</button>

<button type="button"   data-toggle="tooltip" id="bottom"
data-placement="bottom" title="Bottom Tooltip">Tooltip on bottom</button>

<button type="button"   data-toggle="tooltip" id="left"
data-placement="left" title="Left Tooltip">Tooltip on left</button>
</div>
</body>
</body>
</html>
  • Führen Sie die Bootstrap Tooltip-JavaScript-Demo aus

Bootstrap-Tooltip-JavaScript-Beispiel

Bootstrap-Tooltip-Optionen

Die folgende Tabelle zeigt Optionen, die mit Tooltip verwendet werden können:

Option Typwert Standardwert Beschreibung

AnimationBoolescher WertWAHREs wendet einen Fade-Übergang auf Tooltips an.
htmlBoolescher WertFALSCHEs fügt HTML-Elemente in den Tooltip ein.
PlatzierungZeichenfolge/FunktionSpitzeEs legt die Position des Tooltips fest, z. B. oben, links, rechts und unten.
WählerZeichenfolgeFALSCHDelegieren Sie Tooltip-Objekte an angegebene Ziele.
TitelZeichenfolge/FunktionFALSCHEs legt den Standardwert fest, wenn keine Titelattribute vorhanden sind.
auslösenZeichenfolge„Schwebefokus“Es definiert, wie der Tooltip ausgelöst wird, z. B. Klicken, Hover, Fokus und Manuell.
VerzögerungNummer/Objekt0Es fügt eine Verzögerung in ms ein, bevor der Tooltip angezeigt oder ausgeblendet wird. Dies gilt nicht für den manuellen Triggertyp.
Containerstring/falseFALSCHEs hängt einen Tooltip an ein bestimmtes Element an.

Bootstrap-Tooltip-Methoden

Im Folgenden sind die Methoden für Tooltips aufgeführt:

Beispiel für eine Methodenbeschreibung

$().tooltip(optionen)Es fügt einen Tooltip-Handler an eine Elementsammlung an.$().tooltip(optionen)
.tooltip(‚toggle‘)Es schaltet das Tooltip-Element um.$(‚#element‘).tooltip(‚toggle‘)
.tooltip(’show‘)Es zeigt den Tooltip der Elemente an.>$(‚#element‘).tooltip(’show‘)
.tooltip(‚verstecken‘)Es verbirgt einen Element-Tooltip.>$(‚#element‘).tooltip(‚hide‘)
.tooltip(‚zerstören‘)Es verbirgt und zerstört den Tooltip von Elementen.>$(‚#element‘).tooltip(‚zerstören‘)

Das folgende Beispiel zeigt die Verwendung von Methoden:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
     $(".show-tt").click(function(){
        $(".hover-tooltip a").tooltip('show');
     });
     $(".hide-tt").click(function(){
	         $(".hover-tooltip a").tooltip('hide');
     });
     $(".toggle-tt").click(function(){
	         $(".hover-tooltip a").tooltip('toggle');
     });
     $(".destroy-tt").click(function(){
	         $(".hover-tooltip a").tooltip('destroy');
     });
 });
</script>
</head>
<body>
<div  >
<h2>Tooltip using Methods</h2><br>
<p  >
<a href="#" data-toggle="tooltip" title="tooltip demo">Tooltip on Methods</a></p>
<button type="button"  >Show Tooltip</button>
<button type="button"  >Hide Tooltip</button>
<button type="button"  >Toggle Tooltip</button>
<button type="button"  >Destroy Tooltip</button>
</body>
</body>
</html>
  • Führen Sie den Bootstrap-Tooltip mithilfe des Methodenbeispiels aus

Bootstrap-Tooltip mit Beispiel für Methoden

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen