Comment puis-je personnaliser les couleurs des info-bulles Bootstrap ?

Personnalisation des couleurs des info-bulles de Bootstrap

Par défaut, les info-bulles dans Bootstrap sont d'une seule couleur. Cependant, vous pouvez rencontrer des situations dans lesquelles vous désirez plusieurs variations de couleurs. Voici un guide complet pour réaliser cette personnalisation :

Utilisation de CSS

Pour modifier la couleur de l'info-bulle, ajoutez une classe personnalisée à l'élément déclenchant l'info-bulle :

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

Dans le CSS, définissez les styles pour la classe personnalisée :

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

Cela changera la couleur de l'info-bulle en rouge pour l'élément avec la classe red-tooltip.

Ciblage d'emplacements d'info-bulles spécifiques

Si vous avez besoin de personnalisations de couleurs basées sur l'emplacement des info-bulles, tenez compte des éléments suivants :

Pour les versions Bootstrap antérieures à 4

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

Cela cible les info-bulles placées sur le dessus et applique la couleur rouge à la flèche de l'info-bulle.

Pour Bootstrap 4 et supérieur

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

Ce code spécifie la couleur des info-bulles placées sur le bas. Vous pouvez modifier l'emplacement dans l'attribut x-placement pour cibler d'autres emplacements.

Ressources supplémentaires et démo

Pour essayer les méthodes ci-dessus, visitez ce jsFiddle :
[fiddle link]

En suivant ces étapes, vous pouvez créer des couleurs d'info-bulles personnalisées pour répondre à vos exigences de conception.

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!