Přidat Margin Hover Text na jakékoliv webové stránky snadno s Marginotes
Inline tooltips jsou fantastické, ale občas prostě nespadají do určitého obsahu. Většina webových stránek ponechává místo v okrajích podél těla stránky, což je ideální pro přidání obsah ve stylu tooltipu bez popisků.
Zadejte Marginoty, zdarma open source jQuery plugin, který přidá vlastní okraje na okraje webové stránky. Tyto poznámky můžete přepínat na základě odkazů nebo určitých prvků na stránce, například obrázků.
Tento plugin je překvapivě snadno nastavit a přichází s výchozí styl pro poznámky o maržích. Objeví se pryč obsahu a zarovnají se hned vedle odstavce na vaší webové stránce.
Vznášející se poznámky jsou přidán ručně na HTML elementy, používat desc
atribut. Nikdy jsem to neviděl v HTML5, takže nemohu říci, jestli je plně kompatibilní. Ale to se dostat vyzvednout JavaScript, který je vše, co opravdu potřebujete.
Můžete také změnit tento atribut když spustíte marginotes ()
funkci, takže ji můžete změnit na něco podobného data-desc
Pokud hledáte více vyhovující.
Tady je jeden řádek jQuery je potřeba pro fungování tohoto pluginu:
$ ("selector").
Měli byste nahradit "volič"
s jakýmkoli cílem, na který cílíte. Takže pokud jsou v těle vaší stránky, můžete použít ".
. Můžete také cílové kotevní spoje nebo určitých tříd k těmto prvkům.
Uvnitř marginotes ()
funkce, můžete přidat dva volitelné parametry změnit formát poznámky k okraji:
šířka
- nastavuje šířku poznámky (výchozí hodnota je 100px)pole
- nastaví atribut obsahu HTML (výchozí nastavení na"desc"
)
Také, pokud se vám nelíbí používat jQuery můžete vyzkoušet vanilla Marginotes plugin. Běží na vanilce JS, takže máte nulové závislosti získat všechny stejné funkce.
Můžete se také podívat na to živé demo Pokud to chcete vidět v akci. To je určitě unikátní plugin a je to skvělý způsob, jak přidejte další obsah na vaše stránky.