Jednoduchý tooltip

Pavel Tipy & triky, JavaScript, CSS

Tooltip, vyskakovací okénko s nápovědou. Ukážeme si použití velmi jednoduchého řešení, které pro mnoho použití je naprosto dostatečné a zabírá jen 3kB v CSS i JS dohromady.

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.

TooltipsterTipr


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

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

Sjednocení času ve Windows a Linuxu při dual bootu

Každý, kdo používá dual boot mezi Windows a Linuxem, zaznamenal špatný čas při nabootování do Windows. Přitom není moc těžké problém vyřešit ani v jednom...

Další články