suchen

Heim >Web-Frontend >js-Tutorial >Das jQuery-Plug-in Tooltipster implementiert das schöne Tooltips_jquery

Das jQuery-Plug-in Tooltipster implementiert das schöne Tooltips_jquery

WBOY
WBOYOriginal
2016-05-16 16:04:471672Durchsuche

Tooltipster ist ein leichtes jQuery-Tooltip-Plug-in, mit dem Sie schnell schöne Tooltips erstellen können.

1. Laden Sie jQuery- und Plug-in-Dateien einschließlich Tooltipster

Nachdem Sie Tooltipster heruntergeladen haben, verschieben Sie tooltipster.css und jquery.tooltipster.min.js in das Stammverzeichnis der CSS- und JavaScript-Verzeichnisse. Laden Sie als Nächstes jQuery und fügen Sie die Tooltipster-CSS- und JavaScript-Dateien in Ihre Tags ein: 

<head> 
... 
 
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
 
... 
</head>

2. Richten Sie Ihr HTML ein

Damit Tooltipster funktioniert, müssen wir zunächst die .tooltip-Klasse (oder welche Kategorie/Auswahl-Bedeutung Sie verwenden möchten) zu jedem Element hinzufügen, das einen Tooltip haben soll. Als Nächstes legen wir das Titelattribut auf den Wert fest, den unsere Eingabeaufforderung sagen soll. Hier einige Beispiele:
Bild zum Hinzufügen eines Tooltips:

Code kopieren Der Code lautet wie folgt:

646b793adbeb76174c288e719233f305
Fügen Sie einen Link zu einem Tooltip hinzu, der bereits eine Klasse hat:

Code kopieren Der Code lautet wie folgt:
063450ebbe898567db75b80be2a2ef8dLink5db79b134e9f6b82c0b36e0489ee08ed
Tooltip zu einem Div hinzufügen:

Code kopieren Der Code lautet wie folgt:
3b476c208b4381336538f6b008eb4c6f Dieses Div hat einen Tooltip, wenn Sie mit der Maus darüber fahren! 16b28748ea4df4d9c2150843fecfba68



3, Tooltipster aktivieren

Als letztes müssen wir das Plugin aktivieren. Fügen Sie dazu das folgende Skript direkt vor Ihrem schließenden 9c3bca370b5104690d9ef395f2c5f8d1-Tag hinzu (verwenden Sie die gewünschte Option – in diesem Fall verwenden wir die .tooltip-Klasse):


Zusammenfassung: 

<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head>
1. Tooltipps unterstützen HTML-Tag-Inhalte

2.Leicht

3. Flexibel und effizient

4. Einfache Stildefinition, 100 % CSS

5. Unterstützt 3 Themen

6. Unterstützt Firefox, Chrome, IE7/8/9, Opera, Safari

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in die grundlegenden Verpackungstypen von Javascript_Javascript-KenntnissenNächster Artikel：Einführung in die grundlegenden Verpackungstypen von Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen