Bonjour à vous,
j'ai trouvé un code pour customiser les infos bulles qui me va bien :
Il fonctionne bien....
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 <html> <head> <style> .tooltip{ display: inline; position: relative; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; } div { width: 0px; width: 40px; margin: 100px; border: 2px solid black; padding:25px; } </style> </head> <body> <div> <a href="" title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Tooltip</a> </div> </body> </html>
Oui mais voilà, j'ai besoin que le div soit également : overflow: auto; car il contient une liste de taille inconnue, mon bloc ne changera pas de taille, il doit donc avec une barre de scroll.
Mais à ce moment là, la tooltip ne sort plus du div (normal avec overflow)...
Comment faire en sorte que la tooltip ne soit pas pas en overflow auto, qu'elle reste en visible...?
Comme la tooltip de base (qu'on peut voir en laissant un peu plus longtemps la souris sur le lien).
Si je passe tooltip en position: absolute; ça refonctionne mais c'est le bordel visuellement :p
Alors si vous avez une idée, je suis preneur
Merci !
Partager