Discussion :

[dark poulpo]

voir l'image pour la démo :



Voici comme faire ce tooltip sans utiliser de balise supplémentaire...

en fait, on voit sur le net des tutos :

1) pour faire des tooltip en utilisant l'attribut title, seul hic, la plupart des navigateurs (peut être même tous), affiche le tooltip par défaut du navigateur en plus de celui-ci, ce qui est ....comment dire.... vilain!

2) la 2ème méthode que l'on trouve sur le net, consiste à utiliser une classe, et d'utiliser une balise span pour mettre le texte à l'intérieur... bonne idée, mais perso, on a inventé l'attribut title, je trouve ça chiant de ne pas faire pareil! en tout cas c'est mon avis et ça n'engage que moi et certains d'entre vous

donc on va faire un mix des 2, et hop!!!! ça donne ça :

Code :

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

<a .... class="tooltip" data-tip="texte à afficher en tooltip">lien</a>

vous l'aurez compris, la class est là pour exploiter l'attribut tip...

question : pourquoi ne pas éviter la classe et directement attribuer cette classe à tout les balises souhaitées?
réponse : parce que dans le cas où une de ses balises n'a pas besoin d'être tooltipé, il affichera quand même un tooltip, et bon... bof quoi!

mais il existe quand même 2 hics :

1) ce n'est pas applicable au balise IMG pour certain navigateur utilisant webkit par exemple... il faudra donc l'encercler par une balise <a class="tooltip" data-tip="....">
2) si vous l'utilisez sur un lien et que celui-ci est souligné, lors de l'affichage du tooltip, le soulignement disparaîtra...

tout de suite une page de publicité!!! heu non de css!! je m'emporte...

Code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/*
tip affichage de lien, de petit renseignements simple
*/
 
.tooltip:before{
	content:attr(data-tip);
	display:none;
    left:  5px;
    bottom: 19px;
    z-index: 130;
    font-size: x-small;
    font-style: normal;
    font-weight: bold;
    text-decoration:none;
}
 
.tooltip:hover{
	z-index:10;
    position: relative;
    text-decoration:none;
}
 
.tooltip:hover:before{
 
    display: block;
  position: absolute; 
  padding: .5em;
  /*content: attr(title);*/
  min-width: 100px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  bottom: 19px;
 
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,.8);
 
  color: #fff;
  /*font-size: .86em;*/
    text-decoration:none;
 
  z-index: 140;
}
 
.tooltip:hover:after {
  position: absolute;
  display: block;
  content: "";
 
  color: #fff;
  border-color: rgb(0,0,0) transparent transparent transparent;
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
 
  height:0;
  width:0;
 
  bottom: 0px;
  left:1em;
  z-index: 140;
}
 
 
/*CSS3 extras*/
.tooltip:before
{
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
 
 
    -moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;
}