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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Tooltip animat cu HTML si CSS

Last accessed pages

  1. Sfintenia vesnica e in mine (1)
  2. Coduri pt culori (27269)
  3. Viitor perfect si Viitorul perfect continuu - Future perfect and Continuous (10441)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (57959)
  5. Gramatica limbii engleze - Prezentare Generala (110804)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3295)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (3025)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (2916)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2693)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (2221)