Discussion :

[dominos]

Bonjour,

Est-il possible d'obtenir des tooltips de différentes couleurs ? Tout ce que j'arrive à faire pour le moment, c'est à modifier le tooltip selon sa position, mais je n'ai pas réussi à obtenir plusieurs styles pour une seule position "top" par exemple :

Code css :

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
.tooltip.top .tooltip-inner {
    background-color: #ddd;
    color: #555;
    font-size: 13px;
    border: 1px solid #999;
	box-shadow: 0px 0px 4px #ddd;
}
.tooltip.top .tooltip-arrow {
      border-top-color: #888;
 
}
 
.tooltip2.top .tooltip-inner {
    background-color: #337AB7;
    color: #fff;
    font-size: 13px;
    border: 1px solid #999;
	box-shadow: 0px 0px 4px #ddd;
}
.tooltip2.top .tooltip-arrow {
      border-top-color: #888;
 
}

Code html :

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

1
2
<div data-toggle="tooltip" data-placement="top" title="test tooltip top 1">test tooltip top 1</div>
<div data-toggle="tooltip2" data-placement="top" title="test tooltip top 2">test tooltip top 2</div>

Si quelqu'un a une idée ou une solution...

Remerciements,

[Invité]

Bonjour,

Les classes CSS ne correspondent pas au HTML.

[dominos]

Normal c'est du bootstrap mais suis preneur d'une solution en pure CSS si "responsive".

[Invité]

Normal c'est du bootstrap...

Et tu n'as pas jugé utile de le dire tout de suite ?
Et préciser la version n'est pas anodin non plus.

• Bootstrap 4 - Tooltips

• Des infobulles en CSS3 (démo)

[dominos]

Désolé de vous le dire de cette manière, mais ça vous dérangerai de ne plus répondre à mes prochains posts, vos réponses ne font absolument pas avancées d'un pas si ce n'est mon cota de réponses qui grimpe inutilement. (pour info j'utilise bootstrap 3 mais ça change rien au problème CSS)

Bonne journée.

[psychadelic]

jreaux62 à raison, poser une question sans donner le contexte ne vaut rien.
C'est même plutôt agaçant car c'est de plus en plus fréquent, et quand on demande les précisions manquantes, les réponses donnent l'impression qu'on aurait du deviner

il existe plus de 1500 tooltip JavaScript, et plus de 400 en css, juste sur GitHub => https://github.com/search?utf8=%E2%9C%93&q=tooltip

le mot tooltip n'est pas l'exclusivité de bootstrap, et beaucoup de choses ont changées entre la v3 et la v4, Ne t'imagines pas que ceux qui te répondent savent tout cela par cœur,
Alors aller chercher pour toi dans la bonne doc est tout de même un effort, puis chercher à comprendre en quoi cela peut coincer dans ton cas en installant bootstrap chez soi, pour ensuite ce rendre compte que ce n'est pas la bonne version, et qu'il faut tout reprendre...

C'est pour cela que moi-même je ne réponds que rarement à ce type de question incomplète, ça fait perdre trop de temps pour ce faire mal recevoir au final.

tu devrai remercier jreaux62 de prendre la peine de te répondre

Allez, balancez les points négatifs...

[Invité]

@psychadelic

+1

[dominos]

il existe plus de 1500 tooltip JavaScript, et plus de 400 en css, juste sur GitHub => https://github.com/search?utf8=%E2%9C%93&q=tooltip

le mot tooltip n'est pas l'exclusivité de bootstrap, et beaucoup de choses ont changées entre la v3 et la v4, Ne t'imagines pas que ceux qui te répondent savent tout cela par cœur,
Alors aller chercher pour toi dans la bonne doc est tout de même un effort, puis chercher à comprendre en quoi cela peut coincer dans ton cas en installant bootstrap chez soi, pour ensuite ce rendre compte que ce n'est pas la bonne version, et qu'il faut tout reprendre...

Ma question est à la base une question simple, une question en CSS.

Je n'ai pas abordé le sujet du bootstrap, car comme expliqué ça m'est complètement égal, du moment que ça reste "responsive". Javascript ? pourquoi le prendre si mal...

Si je peux éviter ce genre de situation ou plutôt de me retrouver avec un post pollué comme celui-ci qui sert à rien ni à personne d'ailleurs ça serait formidable, car je ne cherche pas particulièrement à faire augmenter mon taux de réponse,

Cordialement,

[Invité]

(pour info j'utilise bootstrap 3 mais ça change rien au problème CSS)

Maintenant, si on prend en compte cette information que tu juges "sans intérêt"... alors que c'est CAPITAL !...

...on peut enfin donner un "vraie" réponse : https://codepen.io/jreaux62/pen/LBPmKy

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="test">
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-color="success" title="Tooltip on left">Tooltip on left</button>
 
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="auto" data-color="warning" title="Tooltip on auto">Tooltip on auto</button>
 
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-color="danger" title="Tooltip on top">Tooltip on top</button>
 
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-color="success" title="Tooltip on bottom">Tooltip on bottom</button>
 
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-color="warning" title="Tooltip on right">Tooltip on right</button>
 
</div>

Code css :

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
#test { padding:100px; }
/* tooltip danger */
*[data-toggle="tooltip"][data-color="danger"] + .tooltip .tooltip-inner
{
  background-color: red !important;
  color: white;
}
*[data-toggle="tooltip"][data-color="danger"] + .tooltip.top .tooltip-arrow
{
  border-top-color: red !important;
}
*[data-toggle="tooltip"][data-color="danger"] + .tooltip.bottom .tooltip-arrow
{
  border-bottom-color: red !important;
}
*[data-toggle="tooltip"][data-color="danger"] + .tooltip.left .tooltip-arrow
{
  border-left-color: red;
}
*[data-toggle="tooltip"][data-color="danger"] + .tooltip.right .tooltip-arrow
{
  border-right-color: red;
}
/* tooltip success */
*[data-toggle="tooltip"][data-color="success"] + .tooltip .tooltip-inner
{
  background-color: green;
  color: white;
}
*[data-toggle="tooltip"][data-color="success"] + .tooltip.top .tooltip-arrow
{
  border-top-color: green;
}
*[data-toggle="tooltip"][data-color="success"] + .tooltip.bottom .tooltip-arrow
{
  border-bottom-color: green;
}
*[data-toggle="tooltip"][data-color="success"] + .tooltip.left .tooltip-arrow
{
  border-left-color: green;
}
*[data-toggle="tooltip"][data-color="success"] + .tooltip.right .tooltip-arrow
{
  border-right-color: green;
}
/* tooltip warning */
*[data-toggle="tooltip"][data-color="warning"] + .tooltip .tooltip-inner
{
  background-color: orange;
  color: white;
}
*[data-toggle="tooltip"][data-color="warning"] + .tooltip.top .tooltip-arrow
{
  border-top-color: orange;
}
*[data-toggle="tooltip"][data-color="warning"] + .tooltip.bottom .tooltip-arrow
{
  border-bottom-color: orange;
}
*[data-toggle="tooltip"][data-color="warning"] + .tooltip.left .tooltip-arrow
{
  border-left-color: orange;
}
*[data-toggle="tooltip"][data-color="warning"] + .tooltip.right .tooltip-arrow
{
  border-right-color: orange;
}

...ça vous dérangerai de ne plus répondre à mes prochains posts...

Désolé... Je n'ai pas tenu compte de ta remarque désobligeante...
Je n'ai pas de raison de te traiter différemment des autres.

N.B. Par contre, inutile de me demander d'expliquer quoi que ce soit...

[dominos]

@jreaux62, je vous remercie, c'est exactement ce que je cherchait à faire !!

Code :

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

1
2
3
4
5
*[data-toggle="tooltip"][data-color="momo"] + .tooltip .tooltip-inner
{
  background-color: #456789 !important;
  color: white;
}

Merci infiniment .

[Invité]

OK.
À question simple, réponse simple :

...Est-il possible d'obtenir des tooltips de différentes couleurs ?...

Oui.