Comment puis-je personnaliser les couleurs des info-bulles Bootstrap pour avoir plusieurs options de couleurs ?

Personnalisation des couleurs des info-bulles Bootstrap

Vous aspirez à modifier la couleur des info-bulles Bootstrap pour l'adapter à vos préférences de conception. Cependant, vous souhaitez avoir la flexibilité de disposer de plusieurs options de couleurs, plutôt que de simplement remplacer la couleur par défaut.

Pour y parvenir, vous pouvez utiliser l'approche suivante :

Personnalisation des couleurs< /h3>

1. Attribuez un nom de classe unique à l'élément qui déclenchera l'info-bulle, tel que "red-tooltip."
2. Définissez les règles CSS pour la classe personnalisée afin de spécifier la couleur de l'info-bulle souhaitée :

.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
  /* Red color */
}

Préservation de la flèche noire (versions Bootstrap antérieures à 5)

Dans les versions antérieures de Bootstrap, la flèche de l'info-bulle peut apparaître noire. Pour résoudre ce problème :

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

Personnalisation des couleurs avec Bootstrap 4

Pour Bootstrap 4, utilisez la règle CSS suivante :

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

Extrait complet (Bootstrap 4)

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

.tooltip-main {
  /* Custom settings for your main tooltip element */
}

.tooltip-qm {
  /* Custom settings for the question mark icon inside the main tooltip element */
}

.tooltip-inner {
  /* Custom settings for the tooltip content */
}

.tooltip.show {
  /* Custom settings for the visible tooltip */
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red color */
  }
</style>

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!