Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

Tooltip CSS effect

Tooltip CSS effect

Op sommige sites zie je wel eens een pop-up scherm als je bijvoorbeeld over een vraagteken gaat met je muis of over een bepaald woord. Dit is een zogenaamde tooltip. Dit lijkt erg ingewikkeld, maar met CSS kun je veel, heel veel….

Zonder dat je gebruik moet maken van allerlei ingewikkelde programmeertechnieken kun je dit nu voortaan ook zelf doen. De volgende code heb je nodig. Vervolgens pas je dit aan en voilà….

HTML code

Allereerst breng je in je site de volgende code aan in bijvoorbeeld een <a href> tag (de link tag). Via het woord “tooltip” leg je de link met css.

Tip: Let op dat je de juiste DOCTYPE aanroept in je site <!DOCTYPE html>, waarmee je de nieuwste techniek kunt gebruiken binnen je site.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent blandit <a href="#" tooltip="Dit is een tooltip via 
CSS en HTML zonder moeilijk programmeerwerk">tellus ut</a>
sapien pretium ornare.</p>

[ad]

CSS opmaak tooltip

Met CSS maak je de tooltip naar eigen inzich mooi op. Hiermee kun je vervolgens eindeloos variëren en mooier maken. Dit is een basis voorbeeld van wat mogelijk is.

<style type="text/css">
a:link { position: relative; text-decoration: none; border-bottom: solid 1px; }
a:before { content: ""; position: absolute; border-top: 20px solid #EDF494; 
border-left: 30px solid transparent; border-right: 30px solid transparent; 
display: none; top: -18px; left: -26px; }
a:after { content: attr(tooltip); position: absolute; color: #20211C; 
top: -35px; left: -26px; background: #EDF494; 
padding: 5px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; 
border-radius: 5px; white-space: nowrap; display: none; }
a:hover:after, a:hover:before { display: block; }
</style>

De a:before zorgt ervoor dat de ballon een driehoekje krijgt naar de link toe. De a:after zorgt ervoor dat je de tooltip laat zien. Dit zijn beide vaste CSS selectors om een effect mee te scheppen.

De tooltip is niet zichtbaar in eerste instantie. Door eerst beide elementen op display: none te zetten, bereik je dit effect.

Via de a:hover met after en before maak je de elementen zichtbaar als iemand met de muis over de link gaat. Op deze manier kun je snel en simpel een mooie tooltip maken voor je eigen site.