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

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