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

Citation:

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,

Citation:

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

16/11/2011, 08h57	#4
isitien Membre du Club Inscription : janvier 2007 Messages : 410 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 410 Points : 56 Points : 56	Bovino: il n y a aucun code JS adiGuba: merci pour le code je pense pas qu'il accepte du code HTML
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email