L'attribut data-tip CSS

**isitien** · 15/11/2011, 06h19

Bonjour,

J'ai trouve ce bout de code qui affiche des informations (tooltip) sur un lien en utilisant data-tip, je l'ai essaye mais ca marche pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a id="embed" class="embed" href="#" style="float:right; background:url(watchLater.png) no-repeat;" data-tip="tooltip"></a>

merci de m'expliquer son utilite ainsi que comment faire ce tooltip

**Bovino** · 15/11/2011, 08h56

merci de m'expliquer son utilite

Ben aucune... data-tip n'existe pas en CSS...
J'imagine que c'est un attribut personnalisé utilisé par un script JavaScript pour afficher une infobulle.

**adiGuba** · 15/11/2011, 12h01

Salut,

Envoyé par Bovino

Ben aucune... data-tip n'existe pas en CSS...
J'imagine que c'est un attribut personnalisé utilisé par un script JavaScript pour afficher une infobulle.

Plus précisément c'est un attribut personnalisé. Il me semble que c'est standardisé avec HTML5 : on a le droit d'utiliser n'importe quel attribut à partir du moment où il commence par data-

Par contre on peut très bien utiliser cela via les CSS, avec un navigateur moderne :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
a[data-tip] {
        position: relative;
}
a[data-tip]:hover:after {
        content: attr(data-tip);
 
        position: absolute;
        top: 1em; left: 0;
        padding: 4px;
        background: rgba(0,0,0,0.7);
        color: #fff;
        text-decoration: none;
}
</style>
</head>
<body>
 
<a href="#" data-tip="Message du tooltip">link avec tooltip</a>
<a href="#">link</a>
 
</body>
</html>

a+++

**isitien** · 16/11/2011, 08h57

Bovino: il n y a aucun code JS
adiGuba: merci pour le code je pense pas qu'il accepte du code HTML

L'attribut data-tip CSS

CSS

Discussions similaires

Partager

Partager