17. 5. 2006 v sekci webdesign:

Hezké tooltipy

Bylo nebylo, jeden z momentálně neuveřejněných skauských miniwebů si žádal použití formátovaných tooltipů. Možnost 1: Javascript Javascriptové tooltipy fungují tak, že vytáhnou informaci pro tooltip z atributu title příslušného elementu. Funkcionalita v prohlížečích je různá, většina předpřipravených řešení klade největší důraz na zobrazení tooltipů pouze u odkazů. První tooltipy, na které jsem narazil byly Sweet Titles. Jejich velkou výhodou […]

Bylo nebylo, jeden z momentálně neuveřejněných skauských miniwebů si žádal použití formátovaných tooltipů.

Možnost 1: Javascript

Javascriptové tooltipy fungují tak, že vytáhnou informaci pro tooltip z atributu title příslušného elementu. Funkcionalita v prohlížečích je různá, většina předpřipravených řešení klade největší důraz na zobrazení tooltipů pouze u odkazů.

První tooltipy, na které jsem narazil byly Sweet Titles. Jejich velkou výhodou byla snadná konfigurovatelnost, použitelnost u mnoha elementů, přístupnost, a taky hezký grafický efekt. Jenže nefachčí v IE/Win. Teda fachčí, ale špatně se pozicují.

Javascript neumím, takže jsem přes komentáře na Sweet titles narazil na alternativní řešení ProtoTip, které je postavené na frameworku Prototype. Framework má sice o pár kB více, ale mou svatou pohodlnost nějaký ten bajt nezabije.

Jednodušší verzi Sweet Titles najdete na squidfingers.com, či v článku Bubble Tooltips. Obě techniky nemají grafický efekt a jsou použitelné jen pro odkazy.

Možnost 2: CSS

Druhý způsob, jak vytvořit hezké popisky k odkazům je využití techniky Pure CSS Tooltips. Nevýhodou budiž, že IE neumí :hover efekt pro jiný element než odkaz (alespoň bez použití CSS vlastnosti behavior).

Komentáře

rss komentářů
1. jakub
17. 05. 06, 10.29

A co třeba něco z českých luhů a hájů?

http://dero.name/download.php#cotojatka

2. Filosof
17. 05. 06, 10.40

!!! a já se s tím hledáním štval dvě hoďky! :-)

3. Error414
17. 05. 06, 11.07

Ja myslel ze derovi cotojatka jsou vseobecne v povedomi webtvurcu. Asi jeste Dero musi zapracovat na propagaci.

4. Error414
17. 05. 06, 11.35

BTW: Kdyz du na main-page tak to ukazuje 2 prispevky pod timto clankem, ale tedka jsou tu 3 (tohle pisu jeste pred odeslanim).

bug nebo zamer?

5. Tommi Vega
17. 05. 06, 11.48

Také jsem chtěl doporučit Derovi COTOJÁTKA, ale mě někdo předběhl :D

6. Erix
17. 05. 06, 12.10

[5] Derovi je doporučovat nemusíš, když je vytvořil…
(Omlouvám se, ale mě to mrvení češtiny fakt vadí!) :-/
Jinak pěkný přehled bublino-výtvorů :-)

7. von Banhoff
17. 05. 06, 15.17

u těch Prototypů se ten tooltip zobrazuje 2x, jednou pěkně nastylovaný a jednou (nad tím) klasicky, tedy alespoň u mně v Opeře

8. jakub
17. 05. 06, 15.37

[3] Já se o nich dozvěděl až z RS2, i když možná, že to proběhlo i na Weblogy.cz.

9. jakub
17. 05. 06, 15.39

[8] Proběhlo, Google napověděl.

A btw: jsem slepý nebo se na Weblogy.cz opravdu jinak něž přes Google (a spol.) hledat nedá?

10. FRANTA
17. 05. 06, 21.16

TVUJ BLOG JE SUPER …

11. Trupík
17. 05. 06, 22.50

Pozor na Operu – ta totiž zobrazuje v tooltipu adresu odkazu a title sama. Všechny odkazované řešení s tím nic nedělají (ani nevím jestli to jde), a tak se Opeří a ten druhý tooltip překrývají a vůbec to není dobrý…

12. Daniel Srb ben Abraham
19. 05. 06, 09.11

cotojatka nejsou z jednoho duvodu casto pouzitelna:
http://dero.name/js/readme.html#licence

13. Betina
23. 06. 06, 12.50

Akorát bych potřebovala poradit, jak naformátovat tooltip, když použiju tooptips.js od http://dero.name/download.php. Dlouhý text jde za obrazovku a chtělo by to umístit do nějakého čtverce nebo obdélníku a to tak, aby to vždy zůstalo na obrazovce.