Pridajte text Hover na ľubovoľné webové stránky ľahko s okrajmi
Inline tooltipy sú fantastické, ale niekedy sa jednoducho nezhodujú s určitým obsahom. Väčšina webových stránok ponecháva priestor v okrajoch pozdĺž tela stránky a to je ideálne pre pridávanie v štýle nástrojového štýlu bez popisov.
vstúpiť Marginotes, free open source jQuery plugin, ktorý pridáva vlastné poznámky do okrajov vašej webovej stránky. Tieto poznámky môžete prepínať na základe odkazov alebo určitých prvkov na stránke, napríklad obrázkov.
Tento plugin je prekvapivo ľahko nastaviteľný a prichádza s a predvolený štýl pre poznámky na okraji. Zobrazia sa na stranu vášho obsahu a zarovná sa hneď vedľa prvku odseku na vašej webovej stránke.
Poznámky o vznášaní sú pridané ručne na vaše prvky HTML, pomocou a zostupne
atribút. Nikdy som to nevidel v HTML5, takže nemôžem povedať, či je to úplne kompatibilné. Ale to sa dostať zdvihol JavaScript, ktorý je všetko, čo skutočne potrebujete.
Môžete tiež zmeniť tento atribút pri spustení marginotes ()
funkciu, aby ste ju mohli zmeniť na niečo podobné Data-desc
ak sa snažíte byť viac v súlade.
Tu je jeden riadok jQuery potrebný na vytvorenie tohto pluginu:
$ ( "Voliča"). Marginotes ()
Mali by ste nahradiť "Volič"
s akýmkoľvek elementmi, na ktoré zacieľujete. Takže ak sa nachádzajú vo vašom tele stránky, môžete ich použiť ". rozpätie"
. Môžete tiež cieľové ukotvenie alebo niektorými triedami k týmto prvkom.
Vnútri marginotes ()
môžete pridať dva voliteľné parametre na zmenu formátu poznámky na okraji:
šírka
- nastavuje šírku poznámky (predvolené na 100px)lúka
- nastavuje atribút obsahu HTML (predvolené na"Desc"
)
Tiež, ak sa vám nepáči používanie jQuery, môžete to vyskúšať vanilkový doplnok Marginotes. Beží na vanilke JS, takže máte nulových závislostí získať všetky rovnaké funkcie.
Takisto si môžete overiť toto živé demo ak ho chcete vidieť v akcii. To je určite jedinečný plugin a je to skvelý spôsob pridať ďalší obsah na vaše stránky.