KOMPOOS.NL

tooltips

home » css » text-effects » tooltips.html

sitemap


De makkelijkste manier om een link van een tooltip (dit stukje tekst wordt met behulp van alleen maar css in de tooltip getoond) (ga met de muis over de tooltip om een voorbeeld te zien) te voorzien is met behulp van CSS. Er komt geen enkel script aan te pas en de procedure is geheel cross browser. Om deze procedure op jouw pagina te gebruiken moet je de stylesheet (zie hieronder) in de head-sectie van jouw pagina plaatsen, en één (of meer) aangepaste link(s) in de html-code van de body-sectie van jouw pagina toevoegen.

voorbeeld html regel voor een tooltip


<a href="http://kompoos.nl" class="tooltip">link-tekst<span>tool-tip tekst</span></a> 

de stylesheet van de tooltip procedure


<style type="text/css">
	a.tooltip{
		position:relative;
		text-decoration:underline;
		padding:0 0.1em 0 0.1em}
	a.tooltip span{
		padding:0.5em;
		display:none}
	a.tooltip:hover span{
		text-decoration:none;
		display:block;
		position:absolute;
		top:1.5em;
		left:-1.5em;
		width:13em;
		border:1px solid #999999;
		background:#cccccc;
		color:#000000;
		text-align:center}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.