Paolo De Feo
a- a+

Creare tooltip con CSS3

Vediamo come personalizzare il proprio sito grazie ai tooltip.

I tooltip sono degli elementi informativi che appaiano su link e oggetti (come foto) al passaggio del cursore del mouse. Rappresentano la giusta scelta sia per spiegare concetti complessi, che altrimenti potrebbero causare disagi di comprensione, sia per approfondimento informativo.

La creazione di tooltip in CSS3 ci permette una personalizzazione supplementare e più approfondita senza ricorrere ad elementi grafici esterni: insomma, tutto gestito tramite markup. Il tooltip CSS3 viene associato all’HTML grazie all’aggiunta della classe “tooltip” precedentemente creata.

<a class="tooltip" title="descrizione del tooltip" href="indirizzo link">Link</a>

 

Markup CSS3

Vediamo ora il markup da implementare nel foglio di stile CSS:

a.tooltip:after{
	font:12px/1.4 Arial,Georgia,sans-serif;
	content:attr(title);
	display:none;
	position:absolute;
	padding:5px 10px;
	top:0px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698;
	left:-20px;
 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
 
	background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(top, #075698, #2e88c4);
	background:-o-linear-gradient(top, #075698, #2e88c4);
	background:linear-gradient(top, #075698, #2e88c4);
 
	-moz-box-shadow: 0px 0px 4px #000; /* per Firefox 3.5 */
	-webkit-box-shadow: 0px 0px 4px #000; /* per Safari 3.0, Chrome */
	box-shadow: 0px 0px 4px #000; /* per Opera 10.5, IE 9.0 */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* per Internet Explor 6 e 7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* Internet Explorer 8 */
}
/* creazione del triangolino */
a.tooltip:before{
	z-index:13;
	position:absolute;
	content:"



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?