Ich versuche, die QuickInfo- Farbe in Rot zu ändern . Ich möchte jedoch auch mehrere andere Farben haben, damit ich nicht einfach die Farbe des ursprünglichen Tooltips ersetzen möchte.

Wie würde ich das machen?

Sie können diesen Weg verwenden:

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

Und im CSS:

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

jsFiddle

Moeen MH : Bei der neuesten Version von Bootstrap müssen Sie dies möglicherweise tun, um den schwarzen Pfeil loszuwerden:

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

Verwenden Sie dies für Bootstrap 4:

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

Vollständiger Ausschnitt:

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

Wenn Sie auch das Caret / den Pfeil ändern möchten, gehen Sie wie folgt vor:

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

oder

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

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

UPDATE: Bootstrap 3

Sie müssen die Richtung des Tooltips in Bootstrap 3 genau angeben. Zum Beispiel:

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

jsFiddle für alle Tooltip-Anweisungen mit Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

Der einzige Weg für mich zu arbeiten:

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

Für bootstrap4 habe ich folgenden Code verwendet:

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

Hier ist Tooltip-Code in 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;
}

Für die Pfeilfarbe können Sie Folgendes verwenden:

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

Es ist wichtig zu beachten, dass Sie ab Bootstrap 4 diese Stile direkt in Ihrer Bootstrap Sass-Variablendatei anpassen können. In _variables.scss haben Sie also folgende Optionen:

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

Siehe hier: http://v4-alpha.getbootstrap.com/getting-started/options/

Am besten in Sass arbeiten und kompilieren, während Sie mit Grunt- oder Gulp-Build-Tools arbeiten.

mein jQuery Fix:

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

Sie können dies verwenden, um Ihr Problem zu lösen. Ich habe es in meinem Projekt überprüft und es funktioniert gut.

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

Dies wurde bereits richtig beantwortet, aber ich denke, ich sollte auch meine Meinung abgeben. Wie Cozen sagt, ist dies ein Rand, und damit es funktioniert, müssen Sie die Klassen angeben, um dies auf die gleiche Weise zu formatieren, wie Bootstrap es angibt. Sie können dies also tun

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

oder Sie können den nächsten ausführen, nur für den Tooltip-Pfeil, aber Sie müssen das! wichtige hinzufügen, damit das Bootstrap-CSS überschrieben wird

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

Das hat bei mir funktioniert.

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

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

Keine der oben genannten Antworten funktioniert in diesem Fall einwandfrei container: 'body', und die folgende Lösung funktioniert:

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

Und ein einfaches CSS-Snippet:

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

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

Jetzt können Sie Ihren Tooltip wie gewohnt initiieren und eine benutzerdefinierte CSS-Klasse über das data-tooltip-custom-classAttribut übergeben:

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

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

BootStrap 4

Bei Verwendung von BootStrap 4 wird der Tooltip am unteren Rand des Body-Tags angehängt. Wenn Ihr Tooltip ein untergeordnetes Element eines anderen Tags ist, können Sie den Tooltip nicht mithilfe von CSS als Ziel festlegen. Die einzige Möglichkeit, die funktioniert, besteht darin, das Ereignis insert.bs.tooltip zu verwenden und dem inneren div und dem Pfeil eine Klasse hinzuzufügen. Dann können Sie die Klasse in CSS als Ziel festlegen.

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

Sie können den in anderen Antworten genannten Schnellansatz verwenden, wenn Sie nur die Farbe ändern möchten. Wenn Sie jedoch Bootstrap verwenden, sollten Sie Themen verwenden, damit das Erscheinungsbild konsistent ist. Leider gibt es keine integrierte Unterstützung für Themen für Bootstrap, daher habe ich ein kleines Stück CSS geschrieben, das dies tut. Sie erhalten im Grunde tooltip-info, tooltip-warningetc Klassen , dass Sie auf das Element hinzufügen können Thema anzuwenden.

Sie finden diesen Code zusammen mit Geige, Beispielen und weiteren Erklärungen in dieser Antwort: https://stackoverflow.com/a/20880312/207661

Sie können diesen Weg verwenden:

Und im CSS:

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

Der Pfeil ist eine Grenze.
Sie müssen für jeden Pfeil die entsprechende Farbe ändern.

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

Wenn ich jedoch eine Klasse hinzufügen möchte, um die Farbe zu ändern (wie in der Geige mit '.class + .tooltip ...', funktioniert das nicht (Bootstrap 3).
Wenn jemand weiß, wie man damit umgeht ?!?

Bootstrap 3 + SASS für den unteren Tooltip:

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

Bestätigen Sie für den Pfeil zunächst, welche Richtung Sie verwenden. Zum Beispiel benutze ich leftRichtung, dann sollte es sein

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

Scheint sich in Bootstrap 4 geändert zu haben

Wenn Sie die Farbe eines unten platzierten Tooltips in Rot ändern möchten, fügen Sie dies einfach Ihrem CSS hinzu:

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

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

Dadurch wird die Farbe des Tooltips in Bootstrap4 geändert. Sie können unten, links und rechts CSS für jeweils anstelle von oben in .bs-tooltip-top hinzufügen

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

Hier ist ein SCSS-Code (kompiliertes CSS unten), mit dem Sie die QuickInfo-Farben, einschließlich des Pfeils (Rand und Hintergrund für den Pfeil), einfach steuern können:

Hinweis: Möglicherweise müssen Sie an einigen Stellen "wichtig" hinzufügen, damit die CSS-Regeln wirksam werden. Hinweis Nr. 2: Der Stil hier funktioniert nur für TOP- und BOTTOM-Tooltip-Layouts. Fühlen Sie sich frei, etwas mehr Styling hinzuzufügen (& .bs-tooltip-left, & .bs-tooltip-right usw.)

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

Live-Beispiel:

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>

Der einzige Weg für mich zu arbeiten:

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

Überprüfen Sie dies, vielleicht kann es Ihnen helfen. Sie können mehrere QuickInfos farbig gestalten.

Wir verwenden Bootstrap 3.0 auf unserer Website, aber keiner der oben genannten Schritte hat bei der Aktualisierung des Stils des Tooltips funktioniert. Aber ich habe stattdessen eine Lösung mit jQueryUI-Styling gefunden

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>

Ich füge diese Antwort hinzu, falls sich jemand anderes in einer ähnlichen Situation befindet wie ich.

Diese einfache Methode funktioniert für mich, wenn ich die Hintergrundfarbe der Bootstrap-Tooltips ändern möchte:

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

• jsfiddle Live Demo

Kein Tee:

Wenn js Code umfassen .data('tooltip')nicht für Sie arbeiten dann bitte kommentieren seine Linie und uncomment js Code enthalten .data('bs-tooltip').

Anmerkung B:

Wenn Ihre Bootstrap-Tooltip-Funktion am Ende des Körpers einen Tooltip hinzufügt (nicht direkt nach dem Element) , funktioniert meine Lösung noch gut, aber einige andere Antworten auf diesen Seiten funktionierten in diesem Szenario nicht wie @Praveen Kumar und @technoTarek .

Anmerkung C:

Diese Codes Unterstützung tooltip arrowFarbe in allen Platzierungen der Tooltip ( top, bottom, left, right).

Wenn Sie jQuery verwenden möchten, können Sie Folgendes versuchen:

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

Für Bootstrap 4 mit Abhängigkeit von tether.js wurden die .tooltip-Pfeilklassen durch .tooltip.bs-tether-element-attach- [position] {...} ersetzt

Hier ist, wie ich die Farbe geändert und den unteren Pfeil verdickt habe. Für jedes Pixel, das zur Randbreite hinzugefügt wurde, musste ich ein Pixel von der "unteren" Position subtrahieren.

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

Sie müssen andere Positionen anpassen, dh für .tooltip.bs-tether-element-attached left würden Sie den Rand rechts anpassen und neu positionieren, wenn Sie die Randbreite durch Subtrahieren von Pixeln von "links" usw. erhöhen.

Olegs Antwort https://stackoverflow.com/a/42994192/9921853 ist die beste dort. Es ermöglicht das Anwenden der QuickInfo-Stile auf die dynamisch erstellten Elemente. Es funktioniert jedoch nicht für Bootstrap 4. Es sollte leicht modifiziert werden:

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

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

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

Vollständige Lösung (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;
}

für die Bootstrap 4- Version über CSS:

Wenn Sie die Hintergrundfarbe des Ballons ändern möchten :

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

Wenn Sie den Pfeil ändern möchten, wenn er in der unteren Position angezeigt wird :

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

Hoffe dir zu helfen

Wenn Sie in Ihrem BS4-Projekt SASS-Code kompilieren können, können Sie ein Mixin erstellen, um das Farbschema von QuickInfos aus jeder Richtung zu verwalten.

Vorteile dieses Ansatzes:

• Sie müssen kein zusätzliches JavaScript / jQuery für etwas hinzufügen, das Styling beinhaltet.
• Sie nutzen SASS, um das Branding dynamisch für Sie zu handhaben.
• Sie können leicht steuern, welche QuickInfos welche Farbe (n) und Richtung (en) haben.

Hier ist eine von vielen Möglichkeiten, wie Sie dies implementieren können:

Erstellen Sie Ihr Original-Mixin:

• Geben Sie eine Variable für eine Farbe an
• Stellen Sie 2 Parameter ein (einen für den benutzerdefinierten Klassennamen Ihres Tooltips und den anderen für die Farbe). Ich füge auch Standardwerte für diese Parameter hinzu (optional).

• Erstellen Sie eine Liste und durchlaufen Sie sie, um alle 4 möglichen Richtungen abzudecken

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

  
  

Rufen Sie Ihr Mixin an (passen Sie Klassennamen und Farbe an)

• Rufen Sie in Ihrer .scss-Hauptdatei Ihr Mixin folgendermaßen auf:

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

Stellen Sie Ihren BS4 Tooltip in Ihr Layout ein (Richtung anpassen)

• Fügen Sie schließlich Ihrem Layout einen BS4-Tooltip hinzu und geben Sie ihm eine benutzerdefinierte Klasse für Flexibilität. In dieser BS4-Ressource wird die Verwendung von Vorlagen als Option beschrieben. Wir werden das verwenden, um unsere benutzerdefinierte Klasse hinzuzufügen.

• Im folgenden Beispiel wird ein Tooltip zu einem Info-Symbol hinzugefügt:

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

Mit diesem Setup können Sie den Klassennamen, die Farbe und die Richtung Ihres Tooltips anpassen, ohne Ihr ursprüngliches Mixin zu berühren . Wie cool ist das :)

Hoffe das hilft!