web-dev-qa-db-fra.com

Styler une info-bulle (popper.js/bootstrap v4 beta)

J'ai installé bootstrap v4 beta et avec lui la bibliothèque popper.js (tooltip.js). J'essaie d'utiliser sa fonction infobulle. Alors j'ai réussi à le faire apparaître mais je ne peux pas changer son apparence/style pour la vie de moi. J'ai examiné leur documentation plusieurs fois mais je n'arrive pas à le comprendre. (Je déteste juste une prétendue "documentation" qui n'a pas d'exemples). Voici donc mon code HTML:

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span>

Je l'ai activé sur data-toggle en js:

$(function() {
    $('[data-toggle="tooltip"]').tooltip()
})

J'ai remarqué que lorsque l'info-bulle apparaît, une nouvelle div est créée avec la classe "tooltip ...". J'ai donc pensé pouvoir cibler cette classe et la styler dans mon scss. 

.tooltip {
    background-color: #DB2828;
    color: $green;  
}

Ce ne sont pas les options de style souhaitées, je viens juste de tester le fonctionnement de ce dernier ... ainsi que le résultat:  enter image description here

Le même fond noir avec mon arrière-plan de test derrière ... Quelqu'un peut-il m'aider à comprendre cela? Merci beaucoup.

tooltipbootstrap-4popper.js
5
Alin Faur

La structure de l'info-bulle est décrite dans la documentation . Pour changer le style, vous devez remplacer tooltip-inner et arrow:

Mise à jour pour Bootstrap 4.0.0

Démo

.tooltip-inner {
    background-color: #00cc00;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #00cc00 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #00cc00 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #00cc00 !important;
}

(où #00cc00 est la couleur de l'info-bulle souhaitée)

8
Zim

Pour moi, je devais le faire pour l'info-bulle en bas:

.tooltip-inner {
  background-color: $darkGrayClr;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: $darkGrayClr;
}
0
Symro