[BootStrap] Tooltip multi couleurs

Version imprimable

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:

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:

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,

09/07/2018, 10h08
Invité

Bonjour,

Les classes CSS ne correspondent pas au HTML.
09/07/2018, 10h29
dominos

Normal c'est du bootstrap mais suis preneur d'une solution en pure CSS si "responsive".
09/07/2018, 10h34
Invité
Citation:

Envoyé par dominos

Normal c'est du bootstrap...

Et tu n'as pas jugé utile de le dire tout de suite ? :weird:
Et préciser la version n'est pas anodin non plus.
- Bootstrap 4 - Tooltips
- Des infobulles en CSS3 (démo)
09/07/2018, 12h35
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.
09/07/2018, 14h12
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 :roll:

Allez, balancez les points négatifs...
09/07/2018, 14h35
Invité

@psychadelic

+1 :hola:
09/07/2018, 15h14
dominos

Citation:

Envoyé par psychadelic

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... 8-)

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,
09/07/2018, 15h24
psychadelic

Citation:

Envoyé par dominos

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

NON,si tu a l'impression que ta question est forcément simple, tu te trompes complètement.

il peut y avoir d'autre parties dans ton code qui peuvent interférer sur le résultat que tu escompte, et on à aucun moyen ici de le savoir.

Et de toutes façons je vois pas en quoi le fait de poser une question peut te donner le droit de décider si la réponse est simple ou non.

Au passage, les ToolTips dans Bootstrap 3 sont injectés par du code JavaScript, donc c'est aussi une question JavaScript et non "purement" css comme tu veux te borner à l'imaginer et penser à notre place :roll:
09/07/2018, 17h27
Invité

OK.
À question simple, réponse simple :

Citation:

Envoyé par dominos

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

Oui.

Citation:

Envoyé par dominos

(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"... :roll: alors que c'est CAPITAL !...

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

Code:

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:

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;
}

Citation:

Envoyé par dominos

...ç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...

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

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

09/07/2018, 19h25
Invité

Remarque, en passant...

Ce même code NE fonctionne PAS avec Bootstrap v4 !

D'où l'importance d'indiquer AUSSI la version de Bootstrap utilisée...
10/07/2018, 11h19
NoSmoking
Bonjour,
pourquoi ne pas user de la cascade en ajoutant simplement une classe au bouton

Code:

<button class="danger btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

cela allègerait quand même pas mal les sélecteurs
Code:

1 2 3 4 5 6 7 8 /* tooltip danger */ .danger + .tooltip .tooltip-inner { background-color: red !important; color: white; } .danger + .tooltip.top .tooltip-arrow { border-top-color: !important; }
10/07/2018, 11h47
Invité

@NoSmoking
Tu as raison, mais j'ai voulu garder une certaine cohérence avec la définition des tooltip en Bootstrap v3 (via les attributs data-...)
De plus, ça "surcharge" le CSS, au cas où...

Bootstrap v4 fonctionne différemment : le code html du tooltip n'est plus placé juste après le bouton/lien, mais en bas de code (avant </body>) !
(et la classe "tooltip-arrow" et remplacée par la classe "arrow" !)
Du coup, ça ne fonctionne plus... :calim2:
11/07/2018, 18h59
dominos

@NoSmoking Merci pour la correction.