Vi faccio presente un utilizzo dei css per personalizzare a nostro piacimento il tag title. Cercando su internet la maggior parte dei tutorial mostrano come creare un “effetto title” per meglio dire, che utilizza un elemento nascosto che al passaggio del mouse diventa visibile.
Come metodo l’ho trovato sì utile, ma sporco. Sono dell’opinione che se vogliamo il title, dobbiamo usare il title.
Questo è lo stile per la classe stile_title:
.stile_title {
position: relative;
}
.stile_title[data]:hover:after {
font-size: 15px;
content: attr(data);
padding: 4px 8px;
color: #333;
position: absolute;
left: 10px;
top: 10px;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-color: #eeeeee;
background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(top, #eeeeee, #ffffff);
background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
background-image: -ms-linear-gradient(top, #eeeeee, #ffffff);
background-image: -o-linear-gradient(top, #eeeeee, #ffffff);
}
Unica annotazione:
Ho utilizzato il testo che sarà contenuto nell’attributo data piuttosto che title, poiche qualora passassimo il mouse su un elemento personalizzato con questa classe, avremmo un doppio tag title: il nostro personalizzato più quello del browser. Così facendo invece tutto funzionerà come ci aspettiamo.
scriveremo quindi: <div class="stile_title" data="Questo sarà il testo visualizzato"
Qui trovate l’esempio con tutto quello che vi ho scritto:
DEMO