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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Tooltip animat cu HTML si CSS

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (47096)
  2. Verbe modale - SHALL, SHOULD, OUGHT TO, WILL, WOULD, USED TO, BE TO, DARE (13094)
  3. Numerale, Numere in limba engleza - Numerals (21243)
  4. Anotimpurile si vremea (175)
  5. Obiectul Date - Lucru cu Data si Timp (205)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2780)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1054)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (857)
  4. Exercitii engleza - English Tests and exercises - Grammar (830)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (722)