Jednoduchý tooltip

Tooltipy

Je to týden, co jsem během jednoho dne přidával tooltip do dvou projektů. V prvním byl použit bootstrap. Toho jsem využil a jen jsem přidal potřebné volání JavaScriptových metod a třídy k ikonkám s otazníkem.

Druhý projekt už je plně v mé režii, a já začal hledat, který tooltip bude pro mě nejvýhodnější.

Tooltipster a jQueryUI Tooltip

Jako první ve vyhledávání na mě vyskočily tyto dvě řešení. jQueryUI snad není potřeba představovat, mají opravdu dobré řešení na hodně věcí, ale ty skripty a styly nejsou vůbec velikostně malé.

Tooltipster je na tom ale velmi podobně, 17kB jen JavaScript a dalších 9kB CSS.

Jsem zastánce co nejmenších skriptů, proto jsem obě tyto varianty nepoužil. Stačí, že už se všude stahuje ne zrovna malá knihovna jQuery.

Tipr

Tipr je ale na tom přesně naopak. JavaScript má pouhý 1kB a CSS 2kB. Pro mnohé použití bude naprosto dostačující. 

Nevýhody

• Tooltip jen nad nebo pod prvkem
• S delším textem se může tooltip schovat za kraj stránky
• Při módu nad při zalomení textu se tooltip nevykreslí správně
• Text do tooltipu se bere z atributu data-tip, místo title

Pokud ale potřebujete jen pár slov v tooltipu, mohu jen doporučit. Poslední bod z nevýhod taky dokáže opravit i začátečník, takže nevidím problém.

Ukázka

Zde malá ukázka tooltipu z Bootstrap a druhá Tipr na novém projektu.

---

Líbí se ti Tipr, nebo používáš jiný tooltip? Poděl se o zkušenosti v komentářích