stuk tekst bij muis met mouseover
[url]http://spele.eu/index.html[/url]
als je daar me je muis over een link gaat komt er zo'n plaatje te staan. Ik wil ook zoiets alleen moet het dan een divje zijn met daarin wat tekst ipv een plaatje. Volgens mij stond ooit op [url]www.csslabs.be[/url] hoe je zoiets moet doen, alleen zijn ze nu de site aan het vernieuwen en kan ik het dus niet opzoeken 
.
[url]http://spele.eu/index.html[/url]
als je daar me je muis over een link gaat komt er zo'n plaatje te staan. Ik wil ook zoiets alleen moet het dan een divje zijn met daarin wat tekst ipv een plaatje. Volgens mij stond ooit op [url]www.csslabs.be[/url] hoe je zoiets moet doen, alleen zijn ze nu de site aan het vernieuwen en kan ik het dus niet opzoeken
.
Ahja, Ik wou eerst de nieuwe layout van csslabs tonen, maar mag niet van Joren, sorry.
Ik haal het er wel even af.
1. De html
<a href="#" class="tooltip">csslabs<span>blog voor en door webmasters</span></a>
2. De css
2
3
a.tooltip {
position:relative;
}Dit stukje code is heel belangrijk. Het zorgt ervoor dat de tooltip op de juiste plaats komt, bij de link dus.
2
3
4
a:hover.tooltip {
padding:0;
z-index:10;
}Als je wil dat het werkt in IE6, moet padding dit er staan. Padding mag ook een andere waarde hebben in plaats van 0. Z-index zorgt ervoor dat de tooltip boven alles komt te staan.
2
3
a span{
display:none;
}Hiermee wordt tooltip verborgen wanneer het nodig is.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:hover span {
position:absolute;
display:block;
top:15px;
left:30px;
width:110px;
z-index:10;
/* opmaak */
background:#FFFFDF;
border:1px solid #FCF05C;
color:#333333;
padding:2px 3px;
font:11px tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}Eerst wordt de tooltip (span) absoluut gepositioneerd. Zo kunnen we hem goed plaatsen met top en left. Display block zorgt er voor dat de tooltip weer zichtbaar wordt en z-index zorgt er opnieuw voor dat de tooltip boven alles komt te staan. De opmaak is belangrijk om je tooltip duidelijk leesbaar te maken.
In ‘opera’ kan er nog een probleem optreden met de scrollbars. Als je bijvoorbeeld over een link gaat met een tooltip, zouden de scrollbars even kunnen verschijnen. Om dit te voorkomen kan je aan je div waar alles in staat het volgende toevoegen.
2
3
.container {
overflow: hidden;
}Klaar, en dit allemaal zonder javascript!
blaat
ja dat wassie
dankjewel.
[off]foute catagorie
[/off]
[...]
ja dat wassie
dankjewel.
[off]foute catagorie
[/off]
No problemo
