Hinzufügen von Margin-Hover-Text zu beliebigen Websites Mit Marginotes

Inline-Tooltipps sind fantastisch, aber manchmal passen sie einfach nicht gut zu bestimmten Inhalten. Die meisten Websites lassen am Rand der Seite Platz, und dies ist ideal zum Hinzufügen Tooltip-Style-Inhalt ohne die Tooltips.

Eingeben Marginotes, ein kostenloses Open Source jQuery-Plugin Fügt den Rändern benutzerdefinierte Notizen hinzu Ihrer Webseite. Sie können diese Notizen basierend auf Links oder bestimmten Elementen auf der Seite, z. B. Bildern, umschalten.

Dieses Plugin ist überraschend einfach einzurichten und wird mit einem Standard-Stylesheet für Ihre Margin Notes. Diese erscheinen zur Seite Ihres Inhalts und sie werden direkt neben dem Absatzelement auf Ihrer Webseite ausgerichtet.

Die Hover-Notizen sind manuell hinzugefügt zu Ihren HTML-Elementen, Verwendung einer desc Attribut. Ich habe das noch nie in HTML5 gesehen, daher kann ich nicht sagen, ob es vollständig kompatibel ist. Es wird jedoch von JavaScript aufgegriffen, was alles, was Sie wirklich brauchen.

Du kannst auch Ändern Sie dieses Attribut wenn Sie die ausführen Margen () Funktion, so können Sie es in etwas ändern Daten-Abnahme wenn Sie mehr konform sein wollen.

Hier ist die eine Zeile von jQuery benötigt, um dieses Plugin zum Laufen zu bringen:

 $ ("Selektor"). Marginoten () 

Sie sollten ersetzen "Wähler" mit allen Elementen, auf die Sie abzielen. Wenn sie sich in Ihrem Seitenkörper befinden, können Sie sie verwenden ".body span". Du könntest auch Zielankerlinks oder von bestimmten Klassen zu diesen Elementen hinzugefügt.

In der Margen () Funktion können Sie hinzufügen zwei optionale Parameter Um das Format der Randnotiz zu ändern:

1. Breite - Legt die Notenbreite fest (Standardeinstellung ist 100px)
2. Feld - legt das HTML-Inhaltsattribut fest (Standardeinstellung: "desc")

Wenn Sie jQuery nicht mögen, können Sie das auch versuchen Vanille-Marginotes-Plugin. Es läuft auf Vanilla JS, also haben Sie keine Abhängigkeiten um alle dieselben Funktionen zu erhalten.

Sie können dies auch überprüfen Live-Demo Wenn Sie es in Aktion sehen wollen. Dies ist definitiv ein einzigartiges Plugin und es ist eine großartige Möglichkeit fügen Sie zusätzlichen Inhalt hinzu zu Ihrer Website.