Modifier la couleur de l'infobulle de Bootstrap

Question

Ce que j'essaye de faire, c'est de changer le infobulle en rouge. Cependant, je souhaite également disposer de plusieurs autres couleurs et je ne veux pas simplement remplacer la couleur de l'infobulle originale.

Comment dois-je m'y prendre ?

Answer 1

Pour la couleur de la flèche, vous pouvez utiliser ceci :

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}

Answer 2

Il est important de noter qu'à partir de Bootstrap 4, vous pouvez personnaliser ces styles directement dans votre fichier de variables Bootstrap Sass, donc dans _variables.scss vous avez ces options :

//== Tooltips
//
//##

// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

Voir ici : http://v4-alpha.getbootstrap.com/getting-started/options/

Le mieux est de travailler en Sass et de compiler au fur et à mesure avec les outils de construction Grunt ou Gulp.

Answer 3

Mon correctif jQuery :

HTML :

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
       <span class="glyphicon glyphicon-question-sign"></span>
   </a>

jQuery :

$('[data-toggle="tooltip"]').hover(function(){
    $('.tooltip-inner').css('min-width', '400px');
    $('.tooltip-inner').css('color', 'red');
});

Answer 4

Cela a marché pour moi.

.tooltip .arrow:before {
    border-top-color: #008ec3 !important;
}

.tooltip .tooltip-inner {
    background-color: #008ec3;
}

Answer 5

Aucune des réponses ci-dessus n'a fonctionné pour moi dans Bootstrap v5.1.1. J'ai rassemblé quelques solutions cassées et j'ai obtenu la solution suivante en pur CSS :

.tooltip-inner {
  background-color: red !important; /* Set box color to red */
  color: black !important; /* Set text color to black */
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: red; /* Set arrow color to red */
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: red; /* Set arrow color to red */
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: red; /* Set arrow color to red */
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: red; /* Set arrow color to red */
}