Comment puis-je changer la couleur des info-bulles Bootstrap ?

Comment changer la couleur de l'info-bulle de Bootstrap

La modification de la couleur de l'info-bulle dans Bootstrap vous permet de personnaliser son apparence pour qu'elle corresponde au design de votre site Web. Ceci peut être réalisé en ajoutant des styles CSS personnalisés.

Pour modifier la couleur de l'info-bulle, commencez par attribuer une classe unique à l'élément sur lequel vous utilisez l'info-bulle. Par exemple :

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

Ensuite, ajoutez les règles CSS suivantes :

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}

Cela changera la flèche et l'arrière-plan intérieur de l'info-bulle en rouge. Vous pouvez remplacer #f00 par n'importe quel code couleur souhaité pour personnaliser la couleur de l'info-bulle.

Dans Bootstrap 4, vous devrez peut-être cibler spécifiquement la flèche de placement inférieure pour supprimer la couleur noire par défaut :

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}

De plus, pour Bootstrap 4, utilisez le CSS suivant pour les info-bulles :

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!