21 Oct, 2009

Tooltip met enkel CSS

Categoriën: crossbrowser |Muis |Navigation

Als je het titel (title) attribuut gebruikt in je HTML kan je extra informatie geven aan de bezoeker van je website, maar het nadeel is dat je de tooltip niet kan stylen, maar het kan ook anders, een extra element waarin je al de info over je link kan zetten en ook stylen en enkel toont bij muis over (hover).

HTML

<a href="#null">Kom met je muis hier over
	<span>Hier kan je heel veel info in kwijt</span>
</a>

CSS

.example1 a {
position:relative;
}
a span {
top:-999em;/* verberg tekst */
position:absolute;
left:-70px;
width:250px;
padding:5px;
background:#829900;
color:#fff;
border:2px solid green;
}
a:hover {
visibility:visible; /* ie bug nodig om de span te tonen*/
}
a:hover span {
top:-66px; /* toon tekst*/
}

Gerelateerde Snippets

5 Reacties op "Tooltip met enkel CSS"

Remco

October 21st, 2009 at 17:49

1

Mooie oplossing, zal er zeker gebruik van maken. Is er nog een speciale rede waarom je een extreme ‘top’ gebruikt om de span te verbergen en niet ‘display’?

Mark

October 22nd, 2009 at 18:48

2

Omdat dan de tekst er is maar op een buiten-beeldse plaats, en niet “echt niet aanwezig”

joery

October 23rd, 2009 at 19:31

3

ik zie nergens die # .example1 a {
# position:relative;
# }
staan in de html waarom staat hij er dan?

Mark

October 24th, 2009 at 02:18

4

copy pasta??
is per ongeluk dus.

Met link-tabs dynamisch inhoud veranderen | Css Snippets

November 17th, 2009 at 08:48

5

[...] Table design #4: Vertikaal zebra» Tooltip met enkel CSS» CSS Bar Graph complex» :before & :after voor blockquote» Menu kaart met [...]

Reactie formulier


Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.