Tooltip CSS: apparizioni d'effetto nel web.

Stili accattivanti per personalizzare l’effetto hover sul testo.

Quando navighiamo e spostiamo il cursore sopra parole o immagini, appare un box con informazioni aggiuntive o accade qualche trasformazione: l’elemento dell’interfaccia grafica che permette l’effetto hover è chiamato tooltip.
In questo post vogliamo fornirvi stili tooltip CSS gratuiti, compatibili con le ultime versione dei più famosi browser perché utilizziamo nuove proprietà CSS, come le trasformazioni 3D (è consigliato Google Chrome per evitare possibili errori). Questi esempi, inoltre, utilizzano l’effetto hover solo in CSS per mostrare i tooltip e per questo non sono soluzioni adatte a dispositivi mobili.
Proviamo a dare un tocco originale ai nostri testi, allora? Proseguiamo.
Il markup scelto da tympanus.net è
<blockquote>
<p>A man of my <span><span class=”tooltip-item”>spiritual</span><span class=”tooltip-content”><strong>[spir·it·u·al]</strong> affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not eat <span class=”tooltip tooltip-turnleft”><span class=”tooltip-item”>corpses</span><span class=”tooltip-content”><strong>[corpse]</strong> dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p>
<footer><span><span>George Bernard Shaw</span><span class=”tooltip-content”><strong>George Bernard Shaw</strong> (26 July 1856 – 2 November 1950) was an Irish playwright and a co-founder of the London School of Economics.</span></span></footer>
</blockquote>

Il CSS è
@import url(http://fonts.googleapis.com/css?family=Kalam:700,400);
.tooltip {
position: relative;
z-index: 999;
}
Il testo si presenta con questo codice:
.tooltip-item {
font-weight: bold;
cursor: pointer;
}
Mentre la larghezza del testo resta fissa, l’altezza aumenta quanto necessario (all’inizio pensiamo il testo trasparente):
.tooltip-content {
position: absolute;
bottom: 100%;
left: 50%;
z-index: 9999;
margin: 0 0 105px -140px;
padding: 25px;
width: 280px;
border-radius: 10px/50%;
background: #fff;
color: #dd5864;
text-align: left;
font-size: 16px;
opacity: 0;
cursor: default;
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
}
Impostiamo una rotazione funzionale al contenuto. L’effetto che vogliamo creare è un’apertura:
.tooltip-turnright .tooltip-content {
transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
}
.tooltip-turnleft .tooltip-content {
transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}
Ora mostriamo il contenuto con l’effetto hover.
.tooltip:hover .tooltip-content {
opacity: 1;
transform: translate3d(0,0,0);
pointer-events: auto;
}
Qui utilizziamo un altro elemento per aggiungere il tooltip (è un SVG):
.tooltip-content::after {
position: absolute;
top: 100%;
width: 60px;
height: 120px;
background: url(../img/tooltip3.svg) no-repeat center center;
background-size: 100%;
content: ”;
transition: transform 0.3s;
transform-origin: 50% 0;
}
Di seguito impostiamo la rotazione che vogliamo, un modo per riflettere un elemento con CSS:
.tooltip-turnright .tooltip-content::after {
left: 25%;
transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}
.tooltip-turnleft .tooltip-content::after {
right: 25%;
transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}
E reimpostiamo le trasformazioni per raggiungere la posizione finale:
.tooltip-turnright:hover .tooltip-content::after {
transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
}
.tooltip-turnleft:hover .tooltip-content::after {
transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}
Che ne dite di scriverci come sono andate le vostre prove? Attendiamo opinioni, critiche suggerimenti e, perché no, i vostri lavori!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *