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

Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?

action method value

<form action="script.php" method="post"> ... </form>

Ce proprietate CSS adauga umbra la chenar?

background-image box-shadow border-radius

#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}

Clic pe functia care elimina primul element dintr-un array?

pop() push() shift()

var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2

Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.

function() filetype() extension_loaded()

if(extension_loaded("PDO") === true) echo "PDO este valabil."

Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".

has have Can

 Can I listen to music?
- Pot asculta muzica?

Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"

están gustan gusta

Me gustan las frutas dulces.
- Imi plac fructele dulci.

Last accessed pages

Prezentul continuu - Exercitii si teste incepatori ^(38899)
Forma verbului Hay ⁽⁶⁰⁴¹⁾
MySQL Alias si functii ⁽¹⁷³⁵⁾
Gramatica limbii spaniole. Indrumator si prezentare generala ^(68463)
Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax ^(272753)

Popular pages this month

Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax ⁽²³⁹⁾
Gramatica limbii engleze - Prezentare Generala ⁽¹⁴²⁾
Gramatica limbii spaniole. Indrumator si prezentare generala ⁽¹¹⁸⁾
Cursuri limba engleza gratuite si lectii online ⁽¹⁰⁸⁾
Coduri pt culori ⁽¹⁰⁷⁾