Ubah warna tooltip Bootstrap

126

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?

html  css  twitter-bootstrap 
— John Smith
sumber
— vishnu
lihat jawaban ini: stackoverflow.com/a/38279489/3554107 . Untuk menata setiap panah arah, kita harus memilih setiap panah menggunakan pemilih atribut CSS dan kemudian menatanya secara individual.
— Wisnu
— George

Jawaban:

181

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

— Praveen Kumar Purushothaman
sumber
4
Jelas masih panah hitam. Anda juga perlu mengubah warna menggunakan.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
— Fizzix
1
Aduh! Salahku!!! Tetap. @codesnooker tidak melihat bahwa Anda menyebutkan panah !!! Sangat menyesal !!!
— Praveen Kumar Purushothaman
4
Dengan versi bootstrap terbaru, Anda mungkin perlu melakukan ini untuk menghilangkan tanda panah hitam: .red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
— Moein
4
Solusi ini bagus jika Anda membiarkan containeropsi tooltip default. Namun, jika Anda membuatnya container: "body"agar tooltip Anda tidak terpotong karena melimpah, ini akan merusak pemilih css.
— Sedikit
1
@PraveenKumar Jawaban / biola Anda memiliki tujuan bagi saya hari ini ;-) Memiliki masalah serupa yang tidak dapat saya pahami, jadi saya pikir saya akan "Google", seolah-olah . Cheers
— Funk Forty Niner
109

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/

— technoTarek
sumber
Biola tidak berfungsi dan saya tidak melihat tanda sisipannya berubah dengan kode ini.
— Jangan
@Don The github refs untuk css dan js tidak lagi bekerja; diperbarui untuk menggunakan Bootstrap CDN (legacy).
— technoTarek
Semua ini tidak berhasil untuk saya, tetapi solusi Tuyen berhasil.
— Tillito
@technoTarek Ada masalah dengan penempatan kiri, kanan, dan atas. periksa jsFiddle
— Anurag yang
@Anurag biola Anda tidak menggunakan solusi yang saya berikan. Inilah solusi saya untuk semua arah menggunakan html dan js Anda, tetapi css saya: jsfiddle.net/technotarek/nhvvqz4v
— technoTarek
61

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

— Tuyen Cao
sumber
Satu-satunya solusi yang berhasil untuk saya di semua penempatan tooltip :). Terima kasih!
— Anurag
Seharusnya jawaban yang diterima. Ini akan membantu pembaca jika Anda bisa menambahkan jsFiddle.
— Anurag
12

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

— GOTOLR
sumber
11

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;
}
— Julior
sumber
10

Untuk warna panah, Anda dapat menggunakan ini:

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

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.

— Eric Grotke
sumber
Anda juga dapat mengatur warna menggunakan bootstrap 3 dengan $ tooltip-color, $ tooltip-bg dan $ tooltip-arrow-color
— Woraphot Chokratanasombat
6

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');
});
— Dreal
sumber
4

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;
    }
— Akther Hussain
sumber
4

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;}
— Paulo Borralho Martins
sumber
4

Ini berhasil untuk saya.

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

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
— Madian Malfi
sumber
1
Tidak ada solusi lain yang berhasil untuk saya. Tapi, solusi Anda berhasil untuk saya. Terima kasih! :)))
— Aspyn Lim
3

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>
— Oleg
sumber
3

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

— Kokomo
sumber
Ini adalah solusi yang berfungsi untuk Bootstrap 4. Tip: Jika Anda, seperti saya, menggunakan manual pemicu tooltip (mis. Tooltip selalu terlihat), gunakan atribut html lainnya, karena menggunakan 'data-toggle' akan memicu tampilan / sembunyikan acara dengan mouse hover.
— mizerablebr
2

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

— Shital Shah
sumber
2

Anda bisa menggunakan cara ini:

Dan di CSS:

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

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

— C0ZEN
sumber
2

Bootstrap 3 + SASS untuk tooltip bawah :

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

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;
}
— Amir Iqbal
sumber
2

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;
}
— David
sumber
1

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;
}
— Manish
sumber
bootstrap 4 berfungsi, silakan periksa penempatan CSS.
— Manish
jelaskan sedikit jawaban Anda. dapat membantu orang lain
— kode
1

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

— Nadav
sumber
0

Satu-satunya cara bekerja untuk saya:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}
— Vivien
sumber
0 

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

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

— Dragos Nitescu
sumber
0

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.

— JhWebDev
sumber
0

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

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

— RAM
sumber
0

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');
});
— Indra S
sumber
0

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.

— deusoz
sumber
Saya lupa menyebutkan satu aspek lainnya: Jika menaikkan lebar batas elemen tether, juga perlu memposisikan kembali ke tengah menggunakan gaya margin, jadi untuk mengubah dari batas default 5px menjadi 10px saya juga harus mengubah margin kiri default: -5px; ke margin kiri: -10px;
— deusoz
0

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;
}
— Sergey Nudnov
sumber
0

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

— Salvo
sumber
0

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!

— klewis
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.