Zmień kolor podpowiedzi Bootstrap

126

To, co próbuję zrobić, to zmienić kolor podpowiedzi na czerwony. Chcę jednak mieć wiele innych kolorów, więc nie chcę po prostu zastępować oryginalnego koloru podpowiedzi.

Jak bym to zrobił?

html  css  twitter-bootstrap 
— John Smith
źródło
— Wisznu
spójrz na tę odpowiedź: stackoverflow.com/a/38279489/3554107 . Aby nadać styl każdej strzałce kierunkowej, musimy wybrać każdą strzałkę za pomocą selektora atrybutów CSS, a następnie nadać im indywidualny styl.
— Wisznu
Niestandardowe style dla każdej podpowiedzi Właśnie zamieściłem tutaj raczej proste rozwiązanie ...
— George,

Odpowiedzi:

181

Możesz użyć w ten sposób:

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

A w CSS:

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

jsFiddle

Moeen MH : W najnowszej wersji bootstrapa może być konieczne zrobienie tego, aby pozbyć się czarnej strzałki:

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

Użyj tego dla Bootstrap 4:

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

Pełny fragment:

$(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>
Rozwiń fragment

— Praveen Kumar Purushothaman
źródło
4
Zdecydowanie nadal czarna strzała. Musisz także zmienić kolor za pomocą.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
— Fizzix
1
O rany! Mój błąd!!! Naprawiony. @codesnooker nie widział, że wspominasz o strzale !!! Naprawdę przykro!!!
— Praveen Kumar Purushothaman
4
W najnowszej wersji bootstrapa może być konieczne zrobienie tego, aby pozbyć się czarnej strzałki: .red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
— Moein
4
To rozwiązanie jest przyjemne, jeśli pozostawisz containerdomyślną opcję podpowiedzi . Jeśli jednak container: "body"ustawisz opcję tak, że podpowiedź nie zostanie przycięta jako przepełnienie, spowoduje to uszkodzenie selektora css.
— Lekko
1
@PraveenKumar swoją odpowiedź / skrzypce służył celowi dla mnie dzisiaj ;-) miał podobny problem, że nie mogę dowiedzieć się, więc pomyślałem, ja „Google”, jak to było . Pozdrawiam
— Funk Forty Niner
109

Bootstrap 2

Jeśli chcesz również zmienić daszek / strzałkę, wykonaj następujące czynności:

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

lub

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

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

AKTUALIZACJA: Bootstrap 3

Musisz określić kierunek podpowiedzi w Bootstrap 3. Na przykład:

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

jsFiddle dla wszystkich wskazówek podpowiedzi przy użyciu Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

— technoTarek
źródło
Skrzypce nie działają i nie widzę zmiany daszka z tym kodem.
— Don
@Don Odnośniki github do css i js już nie działały; zaktualizowano do korzystania z Bootstrap CDN (starsza wersja).
— technoTarek
Nic z tego nie zadziałało, ale rozwiązanie Tuyen działa.
— Tillito
@technoTarek Wystąpił problem z lewym, prawym i górnym miejscem docelowym. sprawdź edytowany plik jsFiddle
— Anurag
@Anurag Twoje skrzypce nie korzystają z dostarczonego przeze mnie rozwiązania. Oto moje rozwiązanie dla wszystkich kierunków przy użyciu twojego html i js, ale mój css: jsfiddle.net/technotarek/nhvvqz4v
— technoTarek
61

Jedyny sposób, który działa dla mnie:

$(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>
Rozwiń fragment

— Tuyen Cao
źródło
Jedyne rozwiązanie, które działało dla mnie we wszystkich lokalizacjach podpowiedzi :). Dzięki!
— Anurag
Powinna być zaakceptowana odpowiedź. Pomogłoby czytelnikowi, gdybyś mógł dodać jsFiddle.
— Anurag
12

Do bootstrap4 użyłem kodu:

.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;
}
Rozwiń fragment

— GOTOLR
źródło
11

Oto kod podpowiedzi w 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
źródło
10

W przypadku koloru strzałki możesz użyć tego:

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
— zvictor
źródło
7

Należy pamiętać, że od wersji Bootstrap 4 możesz dostosować te style bezpośrednio w pliku zmiennych Bootstrap Sass, więc w pliku _variables.scss masz następujące opcje:

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

Zobacz tutaj: http://v4-alpha.getbootstrap.com/getting-started/options/

Najlepiej jest pracować w Sass i kompilować w trakcie pracy z narzędziami do kompilacji Grunt lub Gulp.

— Eric Grotke
źródło
Możesz również ustawić kolor za pomocą bootstrap 3 z $ tooltip-color, $ tooltip-bg i $ tooltip-arrow-color
— Woraphot Chokratanasombat
6

moja poprawka 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');
});
— Dreal
źródło
4

Możesz to wykorzystać do rozwiązania problemu. Sprawdziłem to w swoim projekcie i działa dobrze.

<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
źródło
4

Odpowiedź na to pytanie jest już prawidłowa, ale myślę, że powinienem również wyrazić swoją opinię. Tak jak cozen mówi, że to jest obramowanie i aby działało, musisz określić klasy, aby sformatować to w taki sam sposób, w jaki określa to bootstrap. Więc możesz to zrobić

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

lub możesz zrobić następny, tylko dla strzałki podpowiedzi, ale musisz dodać! important, aby nadpisał css bootstrap

.tooltip-arrow {border-top-color: #00a8c4!important;}
— Paulo Borralho Martins
źródło
4

To zadziałało dla mnie.

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

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
— Madian Malfi
źródło
1
Żadne inne rozwiązanie nie zadziałało dla mnie. Ale twoje rozwiązanie zadziałało dla mnie. Dzięki! :)))
— Aspyn Lim
3

Żadna z powyższych odpowiedzi nie działa dobrze w przypadku container: 'body', a poniższe rozwiązanie działa:

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

I prosty fragment kodu CSS:

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

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

Teraz możesz jak zwykle zainicjować podpowiedź, przekazując niestandardową klasę CSS za pośrednictwem data-tooltip-custom-classatrybutu:

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

<script>
$('.js-tooltip')
    .data('tooltip-custom-class', 'tooltip-danger')
    .tooltip(/*your options*/)
;
</script>
— Oleg
źródło
3

BootStrap 4

Podczas korzystania z BootStrap 4 podpowiedź jest dołączana na dole tagu body. Jeśli podpowiedź jest elementem podrzędnym innego tagu, nie ma możliwości kierowania na nią za pomocą css. Jedyny sposób, w jaki to działa, to użycie zdarzenia insert.bs.tooltip i dodanie klasy do wewnętrznego elementu div i strzałki. Następnie możesz kierować na klasę w 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>
Rozwiń fragment

— Kokomo
źródło
To jest działające rozwiązanie dla Bootstrap 4. Wskazówka: Jeśli tak jak ja używasz podręcznika wyzwalacza podpowiedzi (tzn. Podpowiedź jest zawsze widoczna), użyj dowolnego innego atrybutu html, ponieważ użycie 'przełączania danych' spowoduje wyświetlenie / ukrycie zdarzenie z najechaniem myszą.
— mizerablebr
2

Jeśli chcesz tylko zmienić kolor, możesz skorzystać z szybkiego podejścia wspomnianego w innych odpowiedziach. Jeśli jednak używasz Bootstrap, powinieneś używać motywów, aby wygląd i styl były spójne. Niestety nie ma wbudowanej obsługi motywów dla Bootstrap, więc napisałem mały fragment CSS, który to robi. Zasadniczo dostajesz klasy itp. tooltip-info, tooltip-warningKtóre możesz dodać do elementu, aby zastosować motyw.

Możesz znaleźć ten kod wraz ze skrzypcami, przykładami i innymi wyjaśnieniami w tej odpowiedzi: https://stackoverflow.com/a/20880312/207661

— Shital Shah
źródło
2

Możesz użyć w ten sposób:

A w CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #000;}
— Sandip
źródło
2

Strzałka jest granicą.
Musisz zmienić kolor dla każdej strzałki.

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

Jeśli jednak chcę dodać klasę, aby zmienić kolor (jak na skrzypcach z '.class + .tooltip ...', to nie działa (bootstrap 3)
.Jeśli ktoś wie, jak sobie z tym poradzić?!?

— C0ZEN
źródło
2

Bootstrap 3 + SASS dla dolnej podpowiedzi:

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}
— Bertrand
źródło
2

W przypadku strzałki najpierw potwierdź, którego kierunku używasz. Na przykład używam leftkierunku, to powinno być

.tooltip .tooltip-inner {
    background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
   border-left-color: #2fa5fb;
}
— Amir Iqbal
źródło
2

Wygląda na to, że zmieniło się w Bootstrap 4

Jeśli chcesz zmienić kolor podpowiedzi umieszczonej na dole na czerwono, po prostu dodaj to do swojego CSS:

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

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}
— David
źródło
1

Zmieni kolor podpowiedzi w bootstrap4, możesz użyć dołu, lewej, prawej, aby dodać CSS dla odpowiedniego zamiast góry w .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
źródło
bootstrap 4 działa, sprawdź położenie CSS.
— Manish
wyjaśnij trochę swoją odpowiedź. może pomóc innym
— koder
1

Oto kod SCSS (skompilowany poniżej), który pomoże Ci łatwo kontrolować kolory podpowiedzi, w tym strzałkę (obramowanie i tło strzałki):

Uwaga: w niektórych miejscach może być konieczne dodanie słowa „ważne”, aby reguły CSS zaczęły obowiązywać. Uwaga # 2: styl tutaj działa tylko dla układów podpowiedzi GÓRNY i DOLNY. Możesz dodać więcej stylów (& .bs-tooltip-left, & .bs-tooltip-right itp.)

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

Przykład na żywo:

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>
Rozwiń fragment

— Nadav
źródło
0

Jedyny sposób, który działa dla mnie:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}
— Vivien
źródło
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>
Rozwiń fragment

Sprawdź, może to ci pomoże. Możesz mieć wiele kolorów podpowiedzi.

— Dragos Nitescu
źródło
0

Na naszej stronie używamy bootstrap 3.0, ale żaden z powyższych kroków nie pomógł w aktualizacji stylu podpowiedzi. Ale zamiast tego znalazłem rozwiązanie, używając stylizacji 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>

Dodaję tę odpowiedź na wypadek, gdyby ktoś inny był w podobnej sytuacji jak ja.

— JhWebDev
źródło
0

Ta prosta metoda działa w moim przypadku, gdy chcę zmienić kolor tła podpowiedzi 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>
Rozwiń fragment

Nie herbata:

Jeśli js kod include .data('tooltip')nie działa dla Ciebie, skomentuj jego linię i dołącz js kod odkomentowania.data('bs-tooltip') .

Uwaga B:

Jeśli funkcja podpowiedzi bootstrapu dodaje podpowiedź na końcu ciała (nie zaraz po elemencie) , moje rozwiązanie działa jeszcze dobrze, ale niektóre inne odpowiedzi na tej stronie nie działają jak @Praveen Kumar i @technoTarek w tym scenariuszu.

Uwaga C:

To wsparcie kody tooltip arrowkolorów we wszystkich miejscach docelowych z podpowiedzi ( top, bottom, left, right).

— Baran
źródło
0

Jeśli chcesz używać jQuery , możesz spróbować tego:

$('[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
źródło
0

Dla Bootstrap 4 z zależnością od tether.js klasy .tooltip-arrow zostały zastąpione przez .tooltip.bs-tether-element-added- [pozycja] {...}

Oto jak zmieniłem kolor i pogrubioną dolną strzałkę. Dla każdego piksela dodanego do border-width, musiałem odjąć jeden piksel od „dolnej” pozycji.

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

Będziesz musiał dostosować się do innych pozycji, np. Dla .tooltip.bs-tether-element-added-left, dostosuj border-right i zmień położenie, jeśli podniesiesz border-width, odejmując piksele od „left”, itd.

— deusoz
źródło
Zaniedbałem wspomnieć o jednym innym aspekcie: Jeśli podnoszę szerokość obramowania elementu tether, trzeba również ustawić go z powrotem na środku za pomocą stylu marginesu, więc aby zmienić domyślną granicę 5px na 10px, musiałem również zmienić domyślny margin-left: -5px; do marginesu w lewo: -10px;
— deusoz
0

Odpowiedź Olega https://stackoverflow.com/a/42994192/9921853 jest tam najlepsza. Pozwala na zastosowanie stylów podpowiedzi do dynamicznie tworzonych elementów. Jednak to nie działa dla Bootstrap 4. Należy go nieco zmodyfikować:

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

Przykład: 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'));
});

Przykład: https://jsfiddle.net/nsmcan/naq530hx

Pełne rozwiązanie (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
źródło
0

dla wersji Bootstrap 4 przez CSS:

jeśli chcesz zmienić kolor tła balonu :

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

jeśli chcesz zmienić strzałkę, gdy pojawia się w dolnej pozycji :

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

Mam nadzieję, że ci pomogę

— Salwa
źródło
0

W ramach projektu BS4, jeśli jesteś w stanie skompilować kod SASS, możesz skorzystać z tworzenia mieszanki do zarządzania schematem kolorów podpowiedzi z dowolnego kierunku.

Korzyści z tego podejścia:

  • Nie musisz dodawać dodatkowego javaScript / jQuery do czegoś, co wymaga stylizacji.
  • Wykorzystujesz SASS do dynamicznej obsługi brandingu za Ciebie.
  • Możesz łatwo kontrolować, które podpowiedzi mają kolor (y) i kierunek (y).

Oto jeden z wielu sposobów, w jaki możesz to zaimplementować:

Stwórz swój oryginalny skład:

  • Podaj zmienną dla koloru
  • Ustaw 2 parametry (jeden dla niestandardowej nazwy klasy Twojej podpowiedzi, a drugi dla koloru). Dodaję również wartości domyślne dla tych parametrów (opcjonalnie).

  • Utwórz listę i zapętl ją, aby objąć wszystkie 4 możliwe kierunki

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


Zadzwoń do swojego miksu (dostosuj nazwę i kolor klasy)

  • W głównym pliku .scss wywołaj swój miks w następujący sposób:

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


Ustaw podpowiedź BS4 w swoim układzie (dostosuj kierunek)

  • Na koniec dodaj podpowiedź BS4 do swojego układu i nadaj mu niestandardową klasę zapewniającą elastyczność. Ten zasób BS4 omawia użycie szablonu jako opcji. Użyjemy tego do dodania naszej własnej klasy.

  • Poniższy przykład dodaje podpowiedź do plakietki ikony informacji:

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


Dzięki tej konfiguracji możesz dostosować nazwę klasy, kolor i kierunek swojej podpowiedzi bez dotykania oryginalnej mieszanki . Jakie to jest świetne :)

Mam nadzieję że to pomoże!

— klewis
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.