Lo que intento hacer es cambiar el color de la información sobre herramientas a rojo. Sin embargo, también quiero tener varios otros colores, así que no quiero simplemente reemplazar el color original de la información sobre herramientas.

¿Cómo haría para hacer esto?

Puedes usar de esta manera:

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

Y en el CSS:

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

jsFiddle

Moeen MH : con la versión más reciente de bootstrap, puede que tenga que hacer esto para deshacerse de la flecha negra:

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

Use esto para Bootstrap 4:

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

Fragmento completo:

$(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 también desea cambiar el cursor / flecha, haga lo siguiente:

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

o

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

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

ACTUALIZACIÓN: Bootstrap 3

Debe ser específico para la dirección de la información sobre herramientas en Bootstrap 3. Por ejemplo:

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

jsFiddle para todas las instrucciones de información sobre herramientas usando Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

La única forma de trabajar para mí:

$(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>

Para bootstrap4 utilicé el código:

.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;
}

Aquí hay un código de información sobre herramientas en 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;
}

Para el color de la flecha, puede usar esto:

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

Es importante tener en cuenta que, a partir de Bootstrap 4, puede personalizar estos estilos directamente en su archivo de variables Bootstrap Sass, por lo que en _variables.scss tiene estas opciones:

//== 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;

Ver aquí: http://v4-alpha.getbootstrap.com/getting-started/options/

Es mejor trabajar en Sass y compilar a medida que avanza con las herramientas de compilación Grunt o Gulp.

mi solución 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');
});

Puede usar esto para resolver su problema. Lo revisé en mi proyecto y funciona 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;
    }

Esto ya ha sido respondido correctamente, pero creo que también debería dar mi opinión. Al igual que cozen dice que esto es un borde, y para que funcione, debe especificar las clases para formatearlo de la misma manera que bootstrap lo especifica. Entonces, puedes hacer esto

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

o puede hacer el siguiente, solo para la flecha de información sobre herramientas, pero debe agregar! important, para que sobrescriba el bootstrap css

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

Esto funcionó para mí.

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

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

Ninguna de las respuestas anteriores funciona bien en caso de container: 'body', y la siguiente solución lo hace:

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

Y un simple fragmento de CSS:

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

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

Ahora puede iniciar su información sobre herramientas como de costumbre, pasando una clase CSS personalizada a través del data-tooltip-custom-classatributo:

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

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

BootStrap 4

Al usar BootStrap 4, la información sobre herramientas se agrega a la parte inferior de la etiqueta del cuerpo. Si su información sobre herramientas es hija de otra etiqueta, no hay forma de orientar la información sobre herramientas mediante CSS. La única forma en que he encontrado que funciona es usando el evento insert.bs.tooltip y agregando una clase al div interno y la flecha. Entonces puedes apuntar a la clase 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>

Puede usar el enfoque rápido mencionado en otras respuestas si solo desea cambiar el color. Sin embargo, si está utilizando Bootstrap, debe usar temas para que la apariencia sea coherente. Desafortunadamente no hay soporte integrado para los temas de Bootstrap, así que escribí un pequeño fragmento de CSS que hace esto. Básicamente tooltip-info, obtienes , tooltip-warningetc. clases que puedes agregar al elemento para aplicar el tema.

Puede encontrar este código junto con el violín, ejemplos y más explicaciones en esta respuesta: https://stackoverflow.com/a/20880312/207661

Puedes usar de esta manera:

Y en el CSS:

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

La flecha es un borde.
Debe cambiar para cada flecha el color correspondiente.

.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;
}

Sin embargo, si quiero agregar una clase para cambiar el color (como en el violín con '.class + .tooltip ...' no funciona (bootstrap 3). ¿
Si alguien sabe cómo manejar eso?

Bootstrap 3 + SASS para información sobre herramientas inferior :

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

Para la flecha, primero confirme qué dirección está utilizando. Por ejemplo, estoy usando la leftdirección, entonces debería ser

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

Parece haber cambiado en Bootstrap 4

Si desea cambiar el color de la información sobre herramientas ubicada en la parte inferior en rojo, simplemente agregue esto a su CSS:

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

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

Cambiará el color de la información sobre herramientas en bootstrap4 que puede usar en la parte inferior, izquierda, derecha para agregar CSS para las respectivas en lugar de la parte superior en .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;
}

Aquí hay un código SCSS (css compilado a continuación) que lo ayudará a controlar fácilmente los colores de información sobre herramientas, incluida la flecha (borde y fondo para la flecha también):

Nota: es posible que deba agregar "importante" en algunos lugares para que las reglas CSS surtan efecto. Nota # 2: el estilo aquí solo funciona para diseños de información sobre herramientas SUPERIOR e INFERIOR. Siéntase libre de agregar un poco más de estilo (& .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;
}

Ejemplo en vivo:

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 única forma de trabajar para mí:

.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>

Mira esto, tal vez te pueda ayudar. Puede tener varios colores de información sobre herramientas.

Estamos usando bootstrap 3.0 en nuestro sitio web, pero ninguno de los pasos anteriores funcionó para actualizar el estilo de la información sobre herramientas. Pero encontré una solución usando el estilo jQueryUI

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>

Estoy agregando esta respuesta en caso de que alguien más se encuentre en una situación similar a la mía.

Este método fácil funciona para mí cuando quiero cambiar el color de fondo de la información sobre herramientas de arranque:

$(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>

• Demostración en vivo de jsfiddle

No hay té:

Si la js inclusión del código .data('tooltip')no funciona para usted, por favor comente su línea e incluya el código descomentado .js.data('bs-tooltip')

Nota B:

Si su función de información sobre herramientas de arranque agrega una información sobre herramientas al final del cuerpo (no justo después del elemento) , mi solución funciona bien todavía, pero algunas otras respuestas en estas páginas no funcionaron como @Praveen Kumar y @technoTarek en este escenario.

Nota C:

Este apoyo códigos tooltip arrowde color en todas las colocaciones de la información sobre herramientas ( top, bottom, left, right).

Si quieres usar jQuery puedes probar esto:

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

Para Bootstrap 4 con dependencia de tether.js, las clases .tooltip-arrow se han reemplazado por .tooltip.bs-tether-element-attach- [position] {...}

Así es como cambié de color y engrosé la flecha inferior. Por cada píxel agregado al ancho del borde, tuve que restar un píxel de la posición "inferior".

.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;
}

Tendrá que ajustar para otras posiciones, es decir, para .tooltip.bs-tether-element-attach-left, ajustará el borde derecho, y volverá a colocarlo si aumenta el ancho del borde restando píxeles de "izquierda", etc.

La respuesta de Oleg https://stackoverflow.com/a/42994192/9921853 es la mejor. Permite aplicar los estilos de información sobre herramientas a los elementos creados dinámicamente. Sin embargo, no funciona para Bootstrap 4. Debería modificarse ligeramente:

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

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

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

Solución completa (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;
}

para la versión Bootstrap 4 a través de CSS:

si quieres cambiar el color de fondo del globo :

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

si desea cambiar la flecha cuando aparece en la posición inferior :

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

Espero ayudarte

Dentro de su proyecto BS4, si puede compilar código SASS, puede aprovechar la creación de un mixin para administrar el esquema de color de la información sobre herramientas desde cualquier dirección.

Beneficios de este enfoque:

• No tiene que agregar javaScript / jQuery adicional para algo que implique estilo.
• Aprovecha SASS para manejar dinámicamente la marca por usted.
• Puede controlar fácilmente qué información sobre herramientas tiene qué color (es) y dirección (es).

Aquí hay una de las muchas formas en que puede implementar esto:

Crea tu mezcla original:

• Proporcionar una variable para un color.
• Establezca 2 parámetros (uno para el nombre de clase personalizado de su información sobre herramientas y el otro para el color). También agrego valores predeterminados para estos parámetros (opcional).

• Cree una lista y repítela para cubrir las 4 direcciones posibles

  //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;
          }
       }
    }
  }

  
  

Llama a tu mixin (ajusta el nombre y el color de la clase)

• Dentro de su archivo .scss principal, llame a su mixin así:

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

Configure su información sobre herramientas BS4 en su diseño (ajuste la dirección)

• Finalmente, agregue una información sobre herramientas BS4 a su diseño y dele una clase personalizada para flexibilidad. Este recurso BS4 habla sobre el uso de la plantilla como una opción. Usaremos eso para agregar nuestra clase personalizada.

• El siguiente ejemplo agrega una información sobre herramientas en una insignia de icono de información:

   <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>

Con esta configuración, puede ajustar el nombre de la clase, el color y la dirección de su información sobre herramientas sin tocar su mezcla original . Cuan genial es eso :)

¡Espero que esto ayude!