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

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

WBOY

Freigeben： 2016-05-16 16:04:47

Original

1623 Leute haben es durchsucht

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>

Nach dem Login kopieren

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:

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

Code kopieren Der Code lautet wie folgt:

" class="ketchup tooltip" title="Dies ist die Tooltip-Nachricht meines Links!">Link

Tooltip zu einem Div hinzufügen:

Code kopieren Der Code lautet wie folgt:

3, Tooltipster aktivieren

Als letztes müssen wir das Plugin aktivieren. Fügen Sie dazu das folgende Skript direkt vor Ihrem schließenden -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>

Nach dem Login kopieren

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.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

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