ToolTip personnalisé et overflow

Version imprimable

Bonjour à vous,

j'ai trouvé un code pour customiser les infos bulles qui me va bien :

Code:

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>

Il fonctionne bien....

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 !

08/08/2018, 10h43
Invité
Bonjour,

1- enlève le div du code CSS !
Il est juste là pour la déco .

2- tu as mis la tooltip sur un lien <a>.
OK si tu veux effectivement qu'on puisse cliquer dessus pour changer de page.

Mais elle peut aussi très bien être sur un simple <span>

3- pour éviter que la 2ème tooltip s'ouvre (celle qui s'ouvre automatiquement avec l'attribut title), remplace title par data-tooltip (par exemple) :

Code:

<span data-tooltip="L'info-bulle .....">tooltip</span>
Code:

1 2 3 .tooltip:hover:after{ ... content: attr(data-tooltip);

Salut,
bah non, je ne veux pas enlever le div :p
exemple plus concret :

Code:

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
<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 {
            height: 50px;
            width: 120px;
            margin: 100px;
            border: 2px solid black;
            padding:25px;
            overflow-y: auto;
        }
        </style>
    </head>
 
    <body>
        <div>
            <ul>
                <li title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Ligne 1</li>
                <li title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Ligne 2</li>
                <li title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Ligne 3</li>
                <li title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Ligne 4</li>
                <li title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Ligne 5</li>
                <li title="L'info-bulle + son double dsjdds dsjf dsf dsf dsf d sfds fgfdgfdg fd gdf gfdg df" class="tooltip">Ligne 6</li>
            </ul>
        </div>
    </body>
</html>

mon code html aura été généré par une boucle php qui balancera toutes les lignes trouvées.
Je veux que mon bloc ne change pas de taille et qu'une barre de défilement apparaisse si besoin.
Et là, je me retrouve donc avec une infobulle personnalisée qui ne sort pas du div contrairement à l'infobulle par défaut.

J'ai laissé exprès l'info bulle par défaut pour qu'on puisse comparer avec la personnalisée :)

OK.

Voilà une solution : https://codepen.io/jreaux62/pen/jpeXdr

Il NE faut PAS positionner les <ul> et <li> (il faut les mettre en static).
Il faut positionner le conteneur (wrapper) en relative : c'est lui qui va servir de référant aux info-bulles.
le cadre (à bord noir) est mis sur le <ul>

Code:

1
2
3
4
5
6
7
8
9
10
<div class="wrapper">
	<ul>
		<li class="tooltip" title="L'info-bulle 1 : Mensarum enim voragines et varias voluptatum">Ligne 1</li>
		<li class="tooltip" title="L'info-bulle 2 : Denique Antiochensis ordinis vertices sub uno. Ut enim quisque sibi plurimum confidit et ut">Ligne 2</li>
		<li class="tooltip" title="L'info-bulle 3 : Quaestione igitur per multiplices dilatata">Ligne 3</li>
		<li class="tooltip" title="L'info-bulle 4 : Postremo ad id indignitatis est ventum, ut cum">Ligne 4</li>
		<li class="tooltip" title="L'info-bulle 5 : Illud tamen te esse admonitum volo, primum ut">Ligne 5</li>
		<li class="tooltip" title="L'info-bulle 6 : Tempore quo primis auspiciis in mundanum fulgorem">Ligne 6</li>
	</ul>
</div>

Code:

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
div.wrapper {
  position: relative;
  display: inline-block;
  margin: 100px;
}
div.wrapper ul,
div.wrapper li.tooltip {
  position: static;
  margin: 0;
  padding: 0;
}
div.wrapper ul {
  height: 60px;
  width: 120px;
  border: 2px solid black;
  padding: 0 25px;
  overflow-y: auto;
  overflow-x: hidden;
}
div.wrapper li.tooltip:hover {
  font-weight:bold;
}
div.wrapper li.tooltip:hover:after {
  font-weight:normal;
}
div.wrapper li.tooltip:hover:after {
  background: #333;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 108%;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
 
div.wrapper li.tooltip:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 100%;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 98;
}

08/08/2018, 12h18
hizoka

Merci pour cette belle proposition :)