codice:
<style>
a:before, a:after {
bottom:0;
display:none;
position:absolute;
}
a:before {
border-top:.6em solid #09f;
border-top:.6em solid rgba(0,153,255,0.8);
border-left:7px solid transparent;
border-right:7px solid transparent;
content:"";
left:20px;
margin-bottom:1em;
}
a:after {
background-color:#0099ff;
background-color:rgba(0,153,255,0.8);
border-radius:7px;
color:#ffffff;
content:attr(data-errorType) ": \A" attr(data-error);
left:0;
margin-bottom:1.5em;
padding:5px 15px;
white-space:pre-wrap;
}
a:hover:after,
a:hover:before {
display:block;
}
</style>
</head>
<body>
<div>
Questo link ha un tooltip usando<code>margin-bottom:1em</code>.
E' solo visibile se ci passi sopra con il mouse
</div>
</body>
</html>
Qui sopra hai un esempio; ma, i tooltip fatti con il solo CSS non sono il massimo.
Meglio usare qualche libreria .js, tipo jQuery, mootools o simile.
Permessi di invio
Rispondi quotando