Geobloggolás - Hogyan Geotag-geld a blogod »
« Page2RSS  

Minden hétre egy ötlet #5 - CSS Tooltip

2008. máj. 8. 14:31

Egy egyszerű trükkel könnyen Tooltip-et létrehozni akár linkekhez, akár bármilyen szöveghez. Helyezz el a kódódban ilyen vagy ehhez hasonló (esetleg class-szel ellátva) stylesheet részletet.

 

a{ z-index:10; }

a:hover{ position:relative;
z-index:100; }

a span{ display:none; }

a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

A linket a következő képpen kell létrehozni, hogy a Tooltip effekt látszódjon:

<a href="#">Title <span>Tooltip</span></a>

 

Ez egy link ez pedig a leírása

 

Mi a véleményed?

Eddig 3 komment érkezett ()

akos.tajti mondja
2008. 05. 08. 17:44

jó ötlet. csak az a baj a css-sel, hogy minden böngésző másképp támogatja. nekem például ez nem működik.

Tupacko mondja
2008. 05. 08. 23:19

Sem FF, sem IE6, sem IE 7 ... érdekes. Az ötlet viszont nem rossz ... csakis CSS tooltip :)

xsolutions mondja
2008. 05. 10. 1:00

Hmm, pedig az ötlet "sima" (ures) oldalon működött, akkor itt hibajavítás lesz :(

Mondj valamit

A szövegben nem lehet HTML-t használni, a linkeket pedig automatikusan aláhúzzuk. Az email cim megadása kötelező, de az oldalon nem jelenik meg. Ha van felhasználóneved, itt bejelentkezhetsz.







Az IP cimedet megjegyezzuk, de ezt csak a komment spam jellegenek vizsgalatahoz hasznaljuk fel.

A legutolso 5

My site was nominated for Best Foreign Language Blog!

    (twitter)

    Ezeket ajánlom

    • Mi az a blog?
    • 23 kerdes jovobeni bloggereknek - Jo-e neked a bloggolas?
    • Hogyan alapozzuk meg a weben hírnevünket bármilyen témakörben?
    • 120 nap alatt a semmiből 2000 olvasó
    • Miért nem reagálnak egymásra a magyar blogok?

    Az utolsó hónap legjobb 5

    • A blog terápiás haszna
    • 7 elkerülendő hiba kommentezésnél
    • Mikor váltsunk az ingyen (blog) szolgáltatóról saját szerverre?
    • Goldenblog 2008 - indulás
    • 2008-as design trendek

    A legjobb 5

    • Ki vagyok én?
    • Miért blogolsz?
    • Blogfüggőség 7 biztos jele
    • Mikor váltsunk az ingyen (blog) szolgáltatóról saját szerverre?
    • A blog terápiás haszna