Apa yang saya coba lakukan adalah mengubah tooltip warna menjadi merah. Namun, saya juga ingin memiliki beberapa warna lain jadi saya tidak hanya ingin mengganti warna tooltip asli.

Bagaimana saya akan melakukan ini?

Anda bisa menggunakan cara ini:

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

Dan di CSS:

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

jsFiddle

Moeen MH : Dengan versi terbaru dari bootstrap, Anda mungkin perlu melakukan ini untuk menghilangkan panah hitam:

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

Gunakan ini untuk Bootstrap 4:

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

Cuplikan Lengkap:

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

Jika Anda juga ingin mengubah tanda sisipan / panah, lakukan hal berikut:

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

atau

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

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

PEMBARUAN: Bootstrap 3

Anda harus spesifik untuk arah tooltip di Bootstrap 3. Misalnya:

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

jsFiddle untuk semua petunjuk tooltip menggunakan Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

Satu-satunya cara bekerja untuk saya:

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

Untuk bootstrap4 saya menggunakan kode:

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

Berikut adalah kode tooltip di 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;
}

Untuk warna panah, Anda dapat menggunakan ini:

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

Penting untuk diperhatikan, pada Bootstrap 4 Anda dapat menyesuaikan gaya ini secara langsung di file variabel Bootstrap Sass Anda, jadi di _variables.scss Anda memiliki opsi ini:

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

Lihat di sini: http://v4-alpha.getbootstrap.com/getting-started/options/

Terbaik untuk bekerja di Sass dan mengkompilasi saat Anda menggunakan alat pembuatan Grunt atau Gulp.

perbaikan jQuery saya:

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

Anda dapat menggunakan ini untuk menyelesaikan masalah Anda. Saya memeriksanya di proyek saya dan berfungsi dengan baik.

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

Ini sudah dijawab dengan benar tetapi saya pikir saya harus memberikan pendapat saya juga. Seperti cozen mengatakan ini adalah perbatasan, dan agar berfungsi, Anda harus menentukan kelas untuk memformat ini dengan cara yang sama yang ditentukan oleh bootstrap. Jadi, Anda bisa melakukan ini

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

atau Anda dapat melakukan langkah berikutnya, hanya untuk tooltip-panah tetapi Anda harus menambahkan! important, sehingga menimpa bootstrap css

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

Ini berhasil untuk saya.

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

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

Bukan dari jawaban di atas berfungsi dengan baik dalam kasus container: 'body', dan solusi berikut berfungsi :

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

Dan cuplikan CSS sederhana:

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

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

Sekarang Anda dapat memasukkan keterangan alat seperti biasa, meneruskan kelas CSS khusus melalui data-tooltip-custom-classatribut:

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

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

BootStrap 4

Saat menggunakan BootStrap 4, tooltip ditambahkan ke bagian bawah tag badan. Jika tooltip Anda adalah turunan dari tag lain, tidak ada cara untuk menargetkan tooltip menggunakan css. Satu-satunya cara saya menemukan yang berhasil adalah menggunakan acara insert.bs.tooltip dan menambahkan kelas ke div bagian dalam dan panah. Kemudian Anda dapat menargetkan kelas di 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>

Anda dapat menggunakan pendekatan cepat yang disebutkan dalam jawaban lain jika Anda hanya ingin mengubah warna. Namun jika Anda menggunakan Bootstrap daripada Anda harus menggunakan tema agar tampilan dan nuansa konsisten. Sayangnya tidak ada dukungan bawaan untuk tema untuk Bootstrap jadi saya menulis sedikit CSS yang melakukan ini. Anda pada dasarnya mendapatkan tooltip-info, tooltip-warningdll kelas yang dapat Anda tambahkan ke elemen untuk menerapkan tema.

Anda dapat menemukan kode ini bersama dengan biola, contoh dan penjelasan lebih lanjut di jawaban ini: https://stackoverflow.com/a/20880312/207661

Anda bisa menggunakan cara ini:

Dan di CSS:

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

Panah adalah pembatas.
Anda perlu mengubah warna yang sesuai untuk setiap panah.

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

Namun jika saya ingin menambahkan kelas untuk mengubah warna (seperti di biola dengan '.class + .tooltip ...' itu tidak berfungsi (bootstrap 3).
Jika seseorang tahu bagaimana mengatasinya?!?

Bootstrap 3 + SASS untuk tooltip bawah :

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

Untuk panah, pertama pastikan arah mana yang Anda gunakan. Misalnya, saya menggunakan leftarah, maka seharusnya begitu

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

Sepertinya telah berubah di Bootstrap 4

Jika Anda ingin mengubah warna tooltip yang ditempatkan paling bawah dengan warna merah, cukup tambahkan ini ke CSS Anda:

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

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

Ini akan mengubah warna tooltip di bootstrap4 Anda dapat menggunakan bawah, kiri, kanan untuk menambahkan CSS untuk masing-masing di tempat atas di .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;
}

Berikut adalah kode SCSS (dikompilasi css di bawah) yang akan membantu Anda mengontrol warna tooltip dengan mudah, termasuk panah (batas dan latar belakang untuk panah juga):

Catatan: Anda mungkin perlu menambahkan "penting" di beberapa tempat agar aturan CSS berlaku. Catatan # 2: gaya di sini hanya berfungsi untuk tata letak tooltip TOP dan BAWAH. Jangan ragu untuk menambahkan beberapa gaya lagi (& .bs-tooltip-left, & .bs-tooltip-right, dll)

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

Contoh Langsung:

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>

Satu-satunya cara bekerja untuk saya:

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

Periksa ini mungkin bisa membantu Anda. Anda dapat memiliki beberapa warna tooltips.

Kami menggunakan bootstrap 3.0 di situs kami, tetapi tidak ada langkah di atas yang berhasil memperbarui gaya tooltip. Tetapi saya menemukan solusi menggunakan gaya jQueryUI sebagai gantinya

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>

Saya menambahkan jawaban ini jika ada orang lain yang mengalami situasi yang sama seperti saya.

Metode mudah ini berfungsi untuk saya ketika saya ingin mengubah warna latar belakang tooltips bootstrap:

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

• Demo Langsung jsfiddle

Catatan A:

Jika js kode termasuk .data('tooltip')tidak berfungsi untuk Anda, silakan beri komentar pada barisnya dan kode tanda komentar js disertakan .data('bs-tooltip').

Catatan B:

Jika fungsi tooltip bootstrap Anda menambahkan tooltip ke akhir badan (tidak tepat setelah elemen) , solusi saya masih berfungsi dengan baik tetapi beberapa jawaban lain di halaman ini tidak berfungsi seperti @Praveen Kumar dan @technoTarek dalam skenario ini.

Catatan C:

Dukungan kode ini tooltip arrowwarna dalam semua penempatan dari tooltip ( top, bottom, left, right).

Jika Anda ingin menggunakan jQuery, Anda dapat mencoba ini:

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

Untuk Bootstrap 4 dengan ketergantungan pada tether.js kelas .tooltip-arrow telah diganti dengan .tooltip.bs-tether-element-attach- [position] {...}

Inilah cara saya mengubah warna dan panah bawah yang menebal. Untuk setiap piksel yang ditambahkan ke lebar bingkai, saya harus mengurangi satu piksel dari posisi "bawah".

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

Anda harus menyesuaikan untuk posisi lain, misalnya untuk .tooltip.bs-tether-element-attach-left Anda akan menyesuaikan border-right, dan memposisikan ulang jika menaikkan lebar bingkai dengan mengurangi piksel dari "kiri", dll.

Jawaban Oleg https://stackoverflow.com/a/42994192/9921853 adalah yang terbaik di sana. Ini memungkinkan untuk menerapkan gaya tooltip ke elemen yang dibuat secara dinamis. Namun itu tidak berfungsi untuk Bootstrap 4. Ini harus sedikit dimodifikasi:

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

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

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

Solusi Lengkap (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;
}

untuk versi Bootstrap 4 melalui CSS:

jika Anda ingin mengubah warna latar belakang balon :

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

Jika Anda ingin mengubah panah saat muncul di posisi bawah :

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

Semoga membantu Anda

Dalam proyek BS4 Anda, jika Anda dapat mengompilasi kode SASS, Anda dapat memanfaatkan pembuatan mixin untuk mengelola skema warna keterangan alat dari segala arah.

Manfaat pendekatan ini:

• Anda tidak perlu menambahkan javaScript / jQuery tambahan untuk sesuatu yang melibatkan gaya.
• Anda memanfaatkan SASS untuk menangani branding secara dinamis untuk Anda.
• Anda dapat dengan mudah mengontrol tooltips mana yang memiliki warna dan arah apa.

Berikut salah satu dari banyak cara Anda dapat menerapkan ini:

Buat mixin asli Anda:

• Berikan variabel untuk warna
• Tetapkan 2 parameter (satu untuk nama kelas kustom dari tooltip Anda, dan yang lainnya untuk warna). Saya juga menambahkan nilai default untuk parameter ini (opsional).

• Buat daftar dan putar di atasnya untuk mencakup semua 4 kemungkinan arah

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

  
  

Panggil mixin Anda (sesuaikan nama dan warna kelas)

• Dalam file .scss utama Anda, panggil mixin Anda seperti ini:

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

Atur Tooltip BS4 Anda dalam tata letak Anda (sesuaikan arah)

• Terakhir, tambahkan tooltip BS4 ke layout Anda, dan berikan kelas kustom untuk fleksibilitas. Sumber daya BS4 ini berbicara tentang penggunaan template sebagai opsi. Kami akan menggunakannya untuk menambahkan kelas khusus kami.

• Contoh berikut menambahkan tooltip pada lencana ikon info:

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

Dengan pengaturan ini, Anda dapat menyesuaikan nama kelas, warna, dan arah tooltip Anda tanpa menyentuh mixin asli Anda . Betapa kerennya itu :)

Semoga ini membantu!