Add Margin Hover szöveget bármely webhelyhez könnyen Marginotes segítségével

Inline eszköztippek fantasztikusak, de néha egyszerűen nem férnek hozzá bizonyos tartalmakhoz. A legtöbb webhely helyet hagy a margókban az oldaltest mentén, és ez tökéletes a hozzáadáshoz eszköztipp-tartalom az eszköztippek nélkül.

Belép Marginotes, egy szabad nyílt forráskódú jQuery plugin hozzáad egyéni megjegyzéseket a margókhoz weblapja. Ezeket a jegyzeteket az oldal hivatkozásaival vagy bizonyos elemeivel, például képekkel kapcsolhatja be.

Ez a bővítmény meglepően könnyen beállítható, és a alapértelmezett stíluslap a margin megjegyzésekhez. Ezek megjelennek oldalra tartalmát, és közvetlenül a bekezdéselem mellé igazodnak a weblapodon.

A hover jegyzetek kézzel hozzáadva a HTML-elemekhez, használva desc tulajdonság. Soha nem láttam ezt HTML5-ben, így nem mondhatom el, hogy teljesen megfelel-e. De nem kapja meg a JavaScript, ami mindössze annyi, amire szüksége van.

Te is módosítsa ezt az attribútumot amikor a marginotes () funkciót, így megváltoztathatod valami hasonlóvá data-desc ha szeretné, hogy jobban megfeleljenek.

Itt van egy sor jQuery ehhez a bővítményhez szükséges:

 $ ( "Választó"). Marginotes () 

Ki kell cserélnie "választó" a célzott elemekkel. Tehát, ha belépnek az oldalod testébe, használhatod ".body span". Akkor is célhorgony kapcsolatok vagy bizonyos osztályok szerint ezeket az elemeket.

Benne marginotes () funkciót két opcionális paraméter a margójegyzet formátumának módosítása:

1. szélesség - beállítja a jegyzet szélességét (alapértelmezett érték 100px)
2. mező - beállítja a HTML tartalom attribútumot (alapértelmezés szerint "Desc")

Ha nem szereted a jQuery használatát, akkor megpróbálhatod a vanilla Marginotes plugin. Van van Jilla vanília, így van nulla függőségek ugyanazokat a funkciókat kapja.

Ezt is megnézheti élő demó ha azt akarod, hogy cselekedjetek. Ez minden bizonnyal egyedülálló plugin, és ez egy nagyszerű módja adjunk hozzá további tartalmat webhelyére.