Tilføj Margin Hover Tekst til alle websteder nemt med Marginoter

Inline værktøjstips er fantastiske, men nogle gange passer de bare ikke godt sammen med bestemt indhold. De fleste websites giver plads i marginalerne langs sidekroppen, og det er perfekt til at tilføje værktøjstip-stil indhold uden værktøjstips.

Gå ind Marginotes, en gratis open source jQuery plugin det tilføjer brugerdefinerede noter til margenerne af din webside. Du kan skifte disse noter baseret på links eller visse elementer på siden, som f.eks. Billeder.

Dette plugin er overraskende let at konfigurere, og det leveres med a standard stylesheet for dine margin noter. Disse vises ud til siden af dit indhold, og de justeres lige ved siden af ​​stykkeelementet på din webside.

Hover noterne er tilføjet manuelt til dine HTML-elementer, ved hjælp af a desc attribut. Jeg har aldrig set dette i HTML5, så jeg kan ikke sige, om det er fuldt kompatibelt. Men det bliver hentet af JavaScript, hvilket er alt hvad du virkelig har brug for.

Du kan også Skift denne attribut når du kører marginotes () funktion, så du kan ændre det til noget lignende data-desc hvis du søger at være mere kompatibel.

Her er den en linje af jQuery nødvendigt for at få denne plugin til at fungere:

 $ ( "Selector"). Marginotes () 

Du skal erstatte "Vælgeren" med hvilke elementer du målretter mod. Så hvis de er inde i din sidekrop, kan du bruge det ".body span". Du kunne også målankerforbindelser eller af bestemte klasser føjet til disse elementer.

Inde i marginotes () funktion, kan du tilføje to valgfrie parametre for at ændre margen note format:

1. bredde - angiver notens bredde (standard til 100px)
2. Mark - Indstiller HTML-indholdsattributten (standard til "Desc")

Hvis du ikke kan lide at bruge jQuery, kan du også prøve Vanille Marginotes plugin. Det kører på vanille JS, så du har nul afhængigheder for at få alle de samme funktioner.

Du kan også tjekke dette ud live demo hvis du vil se det i aktion. Dette er helt sikkert et unikt plugin, og det er en fantastisk måde at Tilføj noget ekstra indhold til dit websted.