Lägg till Marginal Hover Text till alla webbplatser enkelt med Marginoter
Inline verktygstips är fantastiska men ibland passar de inte bra med viss innehåll. De flesta webbplatser lämnar utrymme i marginalerna längs sidokroppen och det här är perfekt för att lägga till Tooltip-stil innehåll utan verktygstips.
Stiga på Marginotes, en gratis öppen källkod jQuery plugin som lägger till anpassade anteckningar till marginalerna av din webbsida. Du kan växla mellan dessa anteckningar baserat på länkar eller vissa element på sidan, till exempel bilder.
Denna plugin är förvånansvärt lätt att ställa in och den levereras med a standard stilark för dina marginalnoteringar. Dessa visas bort till sidan av ditt innehåll och de justeras intill styckeelementet på din webbsida.
Hovla noterna är lagt till manuellt till dina HTML-element, använder en desc attribut. Jag har aldrig sett det här i HTML5 så jag kan inte säga om det är helt kompatibelt. Men det blir hämtat av JavaScript vilket är allt du verkligen behöver.
Du kan också ändra detta attribut när du kör marginotes () funktion, så du kan ändra den till något liknande data desc om du vill vara mer kompatibel.
Här är en rad jQuery behövs för att få denna plugin att fungera:
$ ( "Väljare"). Marginotes ()
Du ska ersätta "väljare" med vilka element du riktar in. Så, om de är inne i din sidokropp kan du använda ".body span". Du kan också målankringslänkar eller av vissa klasser läggas till dessa element.
Inuti marginotes () funktion, kan du lägga till två valfria parametrar för att ändra marginalnoteringsformat:
bredd- ställer anteckningsbredd (standard till 100px)fält- ställer in HTML-innehållsattributet (standard till"Desc")
Om du inte gillar att använda jQuery kan du också prova Vanilla Marginotes plugin. Den körs på vanilj JS, så du har nollberoende för att få alla samma funktioner.
Du kan också kolla här live-demo om du vill se den i aktion. Det här är definitivt ett unikt plugin och det är ett bra sätt att lägg till lite extra innehåll till din webbplats.
