Ce que j'essaie de faire, c'est de changer la couleur de l' info - bulle en rouge. Cependant, je souhaite également avoir plusieurs autres couleurs afin de ne pas simplement remplacer la couleur de l'info-bulle d'origine.

Comment pourrais-je procéder?

Vous pouvez utiliser cette manière:

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

Et dans le CSS:

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

jsFiddle

Moeen MH : Avec la version la plus récente de bootstrap, vous devrez peut-être le faire pour vous débarrasser de la flèche noire:

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

Utilisez ceci pour Bootstrap 4:

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

Extrait complet:

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

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

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

<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 */
  }
</style>

Bootstrap 2

Si vous souhaitez également modifier le curseur / la flèche, procédez comme suit:

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

ou

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

jsFiddle: http://jsfiddle.net/technotarek/2htZe/

MISE À JOUR: Bootstrap 3

Vous devez être précis quant à la direction de l'info-bulle dans Bootstrap 3. Par exemple:

.tooltip.top .tooltip-inner {
    background-color:red;
}
.tooltip.top .tooltip-arrow {
      border-top-color: red;
}

jsFiddle pour toutes les directions des info-bulles à l'aide de Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

La seule façon de travailler pour moi:

$(document).ready(function() {
  //initializing tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6;
}

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!--Tooltip Example-->
<div style="padding:50px;">
  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>

Pour bootstrap4, j'ai utilisé le code:

.tooltip-inner {
  background-color: #color !important;
  color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #color !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #color !important;
}


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


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #color !important;
}

Voici le code de l'info-bulle dans boostrap ...

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

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

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

Important à noter, à 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/

Il est préférable de travailler dans Sass et de compiler au fur et à mesure avec les outils de construction Grunt ou Gulp.

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');
});

Vous pouvez l'utiliser pour résoudre votre problème. Je l'ai vérifié dans mon projet et cela fonctionne bien.

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
    .media-tooltip + .tooltip .tooltip-inner {
        font-size: 14px; 
        font-weight: 700;
        color: rgb( 37, 207, 187 ); 
        border-width: 1px;
        border-color: rgb( 37, 207, 187 );
        border-style: solid;
        background-color: rgb( 219, 242, 239 );
        padding: 10px;
        border-radius: 0;
    } 
    .media-tooltip + .tooltip > .tooltip-arrow{display: none;}
    .media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
         bottom: 89%;
         left: 50%;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
    }

    .media-tooltip + .tooltip .tooltip-inner:after {
        border-color: rgba(219, 242, 239, 0);
        border-bottom-color: #dbf2ef;
        border-width: 10px;
        margin-left: -10px;
    }
    .media-tooltip + .tooltip .tooltip-inner:before {
        border-color: rgba(37, 207, 187, 0);
        border-bottom-color: #25cfbb;
        border-width: 11px;
        margin-left: -11px;
    }

Cela a déjà été répondu correctement, mais je pense que je devrais aussi donner mon avis. Comme Cozen dit que c'est une bordure, et pour que cela fonctionne, vous devez spécifier les classes pour formater cela de la même manière que bootstrap le spécifie. Alors tu peux faire ça

.tooltip .tooltip-inner {background-color: #00a8c4; color: black;} 
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}

ou vous pouvez faire le suivant, juste pour l'info-bulle-flèche mais vous devez ajouter le! important, afin qu'il écrase le bootstrap css

.tooltip-arrow {border-top-color: #00a8c4!important;}

Cela a fonctionné pour moi.

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

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

Aucune des réponses ci-dessus fonctionne bien dans le cas de container: 'body', et la solution suivante fonctionne:

// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Et un simple extrait CSS:

.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}

.tooltip.tooltip-danger.left > .tooltip-arrow {
    border-left-color: #d9534f;
}

Vous pouvez maintenant lancer votre info-bulle comme d'habitude, en passant une classe CSS personnalisée via l' data-tooltip-custom-classattribut:

<span class="js-tooltip">Hover me totally</span>

<script>
$('.js-tooltip')
    .data('tooltip-custom-class', 'tooltip-danger')
    .tooltip(/*your options*/)
;
</script>

BootStrap 4

Lorsque vous utilisez BootStrap 4, l'info-bulle est ajoutée au bas de la balise body. Si votre info-bulle est un enfant d'une autre balise, il n'y a aucun moyen de cibler l'info-bulle à l'aide de css. La seule façon dont j'ai trouvé que cela fonctionne est d'utiliser l'événement insert.bs.tooltip et d'ajouter une classe au div interne et à la flèche. Ensuite, vous pouvez cibler la classe en css.

// initialize tooltips
$('[data-toggle="tooltip"]').tooltip(); 

// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
    var thisClass = $(this).attr("class");
    $('.tooltip-inner').addClass(thisClass);
    $('.arrow').addClass(thisClass + "-arrow");
});

/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
    background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
    border-left-color: red !important
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<p>Show a red tooltip <a href="#" class="redTip" data-toggle="tooltip" data-placement="left" title="You Did It!">Hover over me</a></p>

Vous pouvez utiliser l'approche rapide mentionnée dans d'autres réponses si vous souhaitez simplement changer de couleur. Cependant, si vous utilisez Bootstrap, vous devez utiliser des thèmes pour que l'aspect et la convivialité soient cohérents. Malheureusement, il n'y a pas de support intégré pour les thèmes pour Bootstrap, j'ai donc écrit un petit morceau de CSS qui fait cela. Vous obtenez essentiellement des classes tooltip-info, tooltip-warningetc. que vous pouvez ajouter à l'élément pour appliquer le thème.

Vous pouvez trouver ce code avec un violon, des exemples et plus d'explications dans cette réponse: https://stackoverflow.com/a/20880312/207661

Vous pouvez utiliser cette manière:

Et dans le CSS:

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

La flèche est une bordure.
Vous devez changer pour chaque flèche la couleur correspondante.

.tooltip.top .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
  border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
  border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
  background-color: @color;
  font-size: @font-size-small;
}

Cependant si je veux ajouter une classe pour changer la couleur (comme dans le violon avec '.class + .tooltip ...' ça ne marche pas (bootstrap 3).
Si quelqu'un sait comment gérer ça?!?

Bootstrap 3 + SASS pour l' infobulle du bas :

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}

Pour la flèche, confirmez d'abord la direction que vous utilisez. Par exemple, j'utilise la leftdirection, alors cela devrait être

.tooltip .tooltip-inner {
    background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
   border-left-color: #2fa5fb;
}

Semble avoir changé dans Bootstrap 4

Si vous souhaitez changer la couleur d'une info-bulle placée en bas en rouge, ajoutez simplement ceci à votre CSS:

.tooltip-inner {
    background-color: #f00;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}

Cela changera la couleur de l'info-bulle dans bootstrap4, vous pouvez utiliser en bas, à gauche, à droite pour ajouter du CSS pour respectivement à la place de top dans .bs-tooltip-top

.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] 
.arrow::before {
border-top-color: #00acd6;
}

Voici un code SCSS (css compilé ci-dessous) qui vous aidera à contrôler facilement les couleurs de l'info-bulle, y compris la flèche (bordure et arrière-plan de la flèche également):

Remarque: vous devrez peut-être ajouter «important» à certains endroits pour que les règles CSS prennent effet. Remarque n ° 2: le style ici ne fonctionne que pour les mises en page d'info-bulles TOP et BOTTOM. N'hésitez pas à ajouter plus de style (& .bs-tooltip-left, & .bs-tooltip-right, etc.)

SCSS :

$tt-text-color: lime;
$tt-border-color: lime;
$tt-bg-color: black;
$arrow-border-color: lime;
$arrow-bg-color: black;

.tooltip {
  .tooltip-inner {
    background: $tt-bg-color;
    color: $tt-text-color;
    border: 2px solid $tt-border-color;
  }
  .arrow {
    width: 11px;
    height: 11px;
    border: 2px solid $arrow-border-color;
    bottom: 1px;
    &:before {
      width: 11px;
      height: 11px;
      background: $arrow-bg-color;
      border: 0;
    }
  }
  &.bs-tooltip-top {
    .arrow {
      transform: rotate(-135deg);
    }
  }
  &.bs-tooltip-bottom {
    .arrow {
      transform: rotate(135deg);
      top: 2px;
    }
  }
}

CSS :

.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px;
  height: 11px;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}

Exemple en direct:

jQuery(document).ready(function(){
 $('a').tooltip();
});

.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px!important;
  height: 11px!important;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<div class="text-center py-4">
<a class="cn-box big cn-copy" data-toggle="tooltip" data-placement="bottom" title="Hello There">
  try me
</a>
</div>

La seule façon de travailler pour moi:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}

$(document).ready(function(){
  $('.tooltips-elements')
    .tooltip()
    .each(function() {
        var color = $(this).data('color');
        $(this).hover(function(){
        	var aria = $(this).attr('aria-describedby');
        	$('#' + aria).find('.tooltip-inner').css({
	        	"background": color,
	        	"color" : "#333",
	        	"margin-left" : "10px",
	        	"font-weight" : "700",
	        	"font-family" : "Open Sans",
	        	"font-size" : "13px",
	        });
	        $('#' + aria).find('.tooltip-arrow').css({
	        	"border-bottom-color" : color,
	        });
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" class="tooltips-elements" data-toggle="tooltip"  data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>

Vérifiez ceci peut-être que cela peut vous aider. Vous pouvez avoir plusieurs couleurs d'infobulles.

Nous utilisons bootstrap 3.0 sur notre site Web, mais aucune des étapes ci-dessus n'a fonctionné pour mettre à jour le style de l'info-bulle. Mais j'ai trouvé une solution en utilisant le style jQueryUI à la place

https://jqueryui.com/tooltip/#custom-style

CSS

  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }

HTML

<div class="qu_help" data-toggle="tooltip" title="Some Random Title"> 
   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>

J'ajoute cette réponse au cas où quelqu'un d'autre se trouverait dans une situation similaire à la mienne.

Cette méthode simple fonctionne pour moi lorsque je souhaite changer la couleur d'arrière-plan des info-bulles d'amorçage:

$(function(){
    //$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
    $('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});

.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow, 
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Made by @Ram"
   class="tooltips red-tooltip">My link with red tooltip</a>

• Démo en direct de jsfiddle

Pas de thé:

Si le js code inclut .data('tooltip')ne fonctionne pas pour vous, veuillez commenter sa ligne et décommenter le js code .data('bs-tooltip').

Remarque B:

Si votre fonction d'info-bulle d'amorçage ajoute une info-bulle à la fin du corps (pas juste après l'élément) , ma solution fonctionne encore bien mais certaines autres réponses de ces pages ne fonctionnent pas comme @Praveen Kumar et @technoTarek dans ce scénario.

Remarque C:

Cette prise en charge des codes tooltip arrowcouleur dans tous les placements de l'info - bulle ( top, bottom, left, right).

Si vous souhaitez utiliser jQuery, vous pouvez essayer ceci:

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
    $('.tooltip-inner').css('background-color', 'red');
});

Pour Bootstrap 4 avec une dépendance sur tether.js, les classes .tooltip-arrow ont été remplacées par .tooltip.bs-tether-element-linked- [position] {...}

Voici comment j'ai changé de couleur et épaissi la flèche du bas. Pour chaque pixel ajouté à la largeur de la bordure, je devais soustraire un pixel de la position «inférieure».

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {

    border-top-color: #d19b3d !important;
    border-width: 10px 10px 0;
    bottom: -5px;
}

Vous devrez ajuster pour d'autres positions, c'est-à-dire pour .tooltip.bs-tether-element-linked-left, vous ajustez la bordure droite, et repositionnez si vous augmentez la largeur de la bordure en soustrayant les pixels de "gauche", etc.

La réponse d'Oleg https://stackoverflow.com/a/42994192/9921853 est la meilleure. Il permet d'appliquer les styles d'info-bulles aux éléments créés dynamiquement. Cependant cela ne fonctionne pas pour Bootstrap 4. Il devrait être légèrement modifié:

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Exemple: https://www.bootply.com/UORR04ncTP

Bootstrap 4:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    $(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});

Exemple: https://jsfiddle.net/nsmcan/naq530hx

Solution complète (Bootstrap 3)

JS

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});

$('body').tooltip({ 
    selector: "[title]", 
    html: true
});

HTML

<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>

CSS

.tooltip.tooltip-large > .tooltip-inner {
    max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
    text-align: left;
}

.tooltip.top.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
    border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
    border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
    border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}

pour la version Bootstrap 4 via CSS:

si vous souhaitez modifier la couleur d'arrière - plan du ballon :

/* change style balloon */
.tooltip-inner {
    background-color: green !important;
    color: #fff;
}

si vous souhaitez changer la flèche lorsqu'elle apparaît en position basse :

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

J'espère vous aider

Dans votre projet BS4, si vous êtes capable de compiler du code SASS, vous pouvez profiter de la création d'un mixin pour gérer le jeu de couleurs des info-bulles de n'importe quelle direction.

Avantages de cette approche:

• Vous n'avez pas besoin d'ajouter javaScript / jQuery supplémentaire pour quelque chose qui implique un style.
• Vous tirez parti de SASS pour gérer dynamiquement la marque pour vous.
• Vous pouvez facilement contrôler quelles info-bulles ont quelle (s) couleur (s) et direction (s).

Voici l'une des nombreuses façons dont vous pouvez implémenter ceci:

Créez votre mixin original:

• Fournir une variable pour une couleur
• Définissez 2 paramètres (un pour le nom de classe personnalisé de votre info-bulle et l'autre pour la couleur). J'ajoute également des valeurs par défaut pour ces paramètres (facultatif).

• Créez une liste et faites une boucle dessus pour couvrir les 4 directions possibles

  //define a color
  $m-color-blue: #004c97;
  
  //create a mixin with parameters and default value
  @mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {
  
  //reference your custom class name
  #{$name} {
      .tooltip-inner {
          background-color: $color;
      }
  
      //create a list of possible directions
      $directions: top bottom left right;
  
      //loop through the list
      @each $direction in $directions {
          &.bs-tooltip-#{$direction} .arrow:before,
           .bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
              border-#{$direction}-color: $color !important;
          }
       }
    }
  }

  
  

Appelez votre mixin (ajustez le nom et la couleur de la classe)

• Dans votre fichier principal .scss, appelez votre mixin comme ceci:

  @include m-tooltip-color-direction('.mtooltip', $m-color-blue);

Définissez votre info-bulle BS4 dans votre mise en page (ajustez la direction)

• Enfin, ajoutez une info-bulle BS4 à votre mise en page et donnez-lui une classe personnalisée pour plus de flexibilité. Cette ressource BS4 parle de l'utilisation du modèle en option. Nous utiliserons cela pour ajouter notre classe personnalisée.

• L'exemple suivant ajoute une info-bulle sur un badge d'icône d'information:

   <span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>

Avec cette configuration, vous pouvez ajuster le nom de la classe, la couleur et la direction de votre info-bulle sans toucher à votre mixin d'origine . À quel point cela est cool :)

J'espère que cela t'aides!