Partile de cod din aceasta pagina va arata cum puteti crea un efect de tooltip animat doar cu atribute HTML, CSS pseudo-elemente, si proprietatile CSS de animatie si 'content'.
Iata codul.
<style>
@keyframes anim_tlt {
0% {
bottom:50%;
font-size: 1px;
right: 95%;
}
100% {
bottom: 100%;
font-size: 17px;
right: 2%;
}
}
.tlt_parent {
margin:35px auto;
text-align:center;
}
.tlt_parent .tlt_ex {
background: #abcdef;
display: inline-block;
making: 0 4px;
position: relative;
padding: 20px 1px;
text-align: center;
width: 130px;
}
.tlt_parent .tlt_ex:hover:before {
animation-name: anim_tlt;
animation-duration: 1.2s;
background: #fcb0b0;
border-radius: 6px;
bottom: 100%;
color: #0000d0;
content: attr(data-titl);
font-size: 17px;
margin: 0;
padding: 0 2px 1px 2px;
position: absolute;
right: 2%;
}
</style>
- HTML:
<div class='tlt_parent'> <div class='tlt_ex' data-titl='Hello to Me'>Tooltip with CSS.</div> <div class='tlt_ex' data-titl='Peace is Good'>Have a Good Life.</div> <div class='tlt_ex' data-titl='We are happy'>I am Happines.</div> </div>
data-titl contine textul pentru tooltip, dar puteti folosi oricare alt atribut, de exemplu "title", in acest caz folositi: content: attr(title);.<input type="number" name="points" min="5" max="80" />
#id {
filter:alpha(opacity=40); /* for IE */
opacity:0.4;
}var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.