Tooltip animat cu HTML si CSS

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.

- CSS:

<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>

- Atributul data-titl contine textul pentru tooltip, dar puteti folosi oricare alt atribut, de exemplu "title", in acest caz folositi: content: attr(title);.

• Demo (pozitionati mouse-ul peste dreptunghiuri):

Tooltip with CSS.

Have a Good Life.

I am Happines.

<<-Alte forme complexe cu ..

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Clic pe tag-ul HTML care afiseaza o linie orizontala.

Continut ...
<hr />
Alt continut sub linie ...

Care proprietate CSS defineste culoarea textului?

font-style font-variant color

h2 {
  color: #cbdafb;
}

Clic pe functia care cauta daca un anume caracter sau text e intr-un sir.

indexOf() toString() split()

var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// nu e in sir");
else alert("http:// e in sir");

Care e functia ce imparte un sir in parti de siruri intr-un array, pe baza unui separator?

array_merge() explode() implode()

$str = "mar,banana,pepene,para";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")

Indicati asocierea corecta: "luna-anotimp".

April - Autumn October - Spring July - Summer

July is a beautiful summer month.
- Iulie este o frumoasa luna de vara.