Ändern Sie die Farbe des Bootstrap-Tooltips

125

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

Wie würde ich das machen?

html  css  twitter-bootstrap 
— John Smith
quelle
— Vishnu
Schauen Sie sich diese Antwort an: stackoverflow.com/a/38279489/3554107 . Um die einzelnen Richtungspfeile zu formatieren, müssen Sie jeden Pfeil mithilfe der CSS-Attributauswahl auswählen und dann einzeln formatieren.
— Vishnu
Benutzerdefinierte Stile für jeden Tooltip Ich habe gerade eine ziemlich einfache Lösung hier gepostet ...
— George

Antworten:

179

Sie können diesen Weg verwenden:

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

Und im CSS:

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

jsFiddle

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

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

Verwenden Sie dies für Bootstrap 4:

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

Vollständiger Ausschnitt:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>
Erweitern Sie das Snippet

— Praveen Kumar Purushothaman
quelle
4
Auf jeden Fall noch ein schwarzer Pfeil. Sie müssen auch die Farbe mit.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
— Fizzix
1
Gawd! Mein Fehler!!! Fest. @codesnooker hat nicht gesehen, dass du den Pfeil erwähnt hast !!! Wirklich leid!!!
— Praveen Kumar Purushothaman
4
Mit der neuesten Version von Bootstrap müssen Sie dies möglicherweise tun, um den schwarzen Pfeil loszuwerden: .red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
— Moein
4
Diese Lösung ist hilfreich, wenn Sie die containerStandardeinstellung für die QuickInfo- Option beibehalten. Wenn Sie dies jedoch container: "body"so einstellen, dass Ihr Tooltip nicht als Überlauf abgeschnitten wird, wird die CSS-Auswahl unterbrochen.
— Leicht
1
@PraveenKumar Ihre Antwort / serviert Geige einen Zweck heute für mich ;-) hatte ein ähnliches Problem , dass ich nicht herausfinden konnte, so dachte ich , ich würde „Google“, wie sie waren . Prost
— Funk Forty Niner
109

Bootstrap 2

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

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

oder

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

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

UPDATE: Bootstrap 3

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

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

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

— technoTarek
quelle
Die Geige funktioniert nicht und ich sehe nicht, dass sich das Caret mit diesem Code ändert.
— Don
@ Don Die Github-Refs zum CSS und JS funktionierten nicht mehr. aktualisiert, um Bootstrap CDN (Legacy) zu verwenden.
— TechnoTarek
Nichts davon hat bei mir funktioniert, aber Tuyens Lösung.
— Tillito
@technoTarek Es gibt ein Problem mit Platzierungen für links, rechts und oben. Überprüfen Sie die bearbeitete jsFiddle
— Anurag
@ Anurag Ihre Geige verwendet nicht die von mir bereitgestellte Lösung. Hier ist meine Lösung für alle Richtungen mit Ihrem HTML und JS, aber meine CSS: jsfiddle.net/technotarek/nhvvqz4v
— technoTarek
61

Der einzige Weg für mich zu arbeiten:

$(document).ready(function() {
  //initializing tooltip
  $('[data-toggle="tooltip"]').tooltip();
});
.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!--Tooltip Example-->
<div style="padding:50px;">
  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>
Erweitern Sie das Snippet

— Tuyen Cao
quelle
Die einzige Lösung, die bei allen Platzierungen des Tooltips für mich funktioniert hat :). Vielen Dank!
— Anurag
Sollte die akzeptierte Antwort gewesen sein. Es würde dem Leser helfen, wenn Sie eine jsFiddle hinzufügen könnten.
— Anurag
12

Für bootstrap4 habe ich folgenden Code verwendet:

.tooltip-inner {
  background-color: #color !important;
  color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #color !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #color !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #color !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #color !important;
}
Erweitern Sie das Snippet

— GOTOLR
quelle
11

Hier ist Tooltip-Code in Boostrap ...

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
— Julior
quelle
10

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

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

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

//== Tooltips
//
//##

// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

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

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

— Eric Grotke
quelle
Sie können Farbe auch mit Bootstrap 3 mit $ tooltip-color, $ tooltip-bg und $ tooltip-arrow-color
— einstellen
6

mein jQuery Fix:

HTML:

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
       <span class="glyphicon glyphicon-question-sign"></span>
   </a>

jQuery:

$('[data-toggle="tooltip"]').hover(function(){
    $('.tooltip-inner').css('min-width', '400px');
    $('.tooltip-inner').css('color', 'red');
});
— Dreal
quelle
4

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

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
    .media-tooltip + .tooltip .tooltip-inner {
        font-size: 14px; 
        font-weight: 700;
        color: rgb( 37, 207, 187 ); 
        border-width: 1px;
        border-color: rgb( 37, 207, 187 );
        border-style: solid;
        background-color: rgb( 219, 242, 239 );
        padding: 10px;
        border-radius: 0;
    } 
    .media-tooltip + .tooltip > .tooltip-arrow{display: none;}
    .media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
         bottom: 89%;
         left: 50%;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
    }

    .media-tooltip + .tooltip .tooltip-inner:after {
        border-color: rgba(219, 242, 239, 0);
        border-bottom-color: #dbf2ef;
        border-width: 10px;
        margin-left: -10px;
    }
    .media-tooltip + .tooltip .tooltip-inner:before {
        border-color: rgba(37, 207, 187, 0);
        border-bottom-color: #25cfbb;
        border-width: 11px;
        margin-left: -11px;
    }
— Akther Hussain
quelle
4

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

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

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

.tooltip-arrow {border-top-color: #00a8c4!important;}
— Paulo Borralho Martins
quelle
4

Das hat bei mir funktioniert.

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

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
— Madian Malfi
quelle
1
Keine der anderen Lösungen hat bei mir funktioniert. Aber Ihre Lösung hat bei mir funktioniert. Vielen Dank! :)))
— Aspyn Lim
3

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

// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Und ein einfaches CSS-Snippet:

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

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

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

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

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

BootStrap 4

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

// initialize tooltips
$('[data-toggle="tooltip"]').tooltip(); 

// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
    var thisClass = $(this).attr("class");
    $('.tooltip-inner').addClass(thisClass);
    $('.arrow').addClass(thisClass + "-arrow");
});
/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
    background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
    border-left-color: red !important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<p>Show a red tooltip <a href="#" class="redTip" data-toggle="tooltip" data-placement="left" title="You Did It!">Hover over me</a></p>
Erweitern Sie das Snippet

— Kokomo
quelle
Dies ist die funktionierende Lösung für Bootstrap 4. Tipp: Wenn Sie wie ich das Tooltip-Trigger-Handbuch verwenden (dh Tooltip immer sichtbar), verwenden Sie ein anderes HTML-Attribut, da die Verwendung von 'Datenumschaltung' das Ein- / Ausblenden auslöst Ereignis mit Mauszeiger.
— mizerablebr
2

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

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

— Shital Shah
quelle
2

Sie können diesen Weg verwenden:

Und im CSS:

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

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

.tooltip.top .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
  border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
  border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
  background-color: @color;
  font-size: @font-size-small;
}

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

— C0ZEN
quelle
2

Bootstrap 3 + SASS für den unteren Tooltip:

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

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

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

Scheint sich in Bootstrap 4 geändert zu haben

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

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

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}
— David
quelle
1

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

.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] 
.arrow::before {
border-top-color: #00acd6;
}
— Manish
quelle
Bootstrap 4 funktioniert Bitte überprüfen Sie die Platzierung von CSS.
— Manish
Erkläre deine Antwort ein wenig. es könnte anderen helfen
— Codierer
1

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

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

SCSS :

$tt-text-color: lime;
$tt-border-color: lime;
$tt-bg-color: black;
$arrow-border-color: lime;
$arrow-bg-color: black;

.tooltip {
  .tooltip-inner {
    background: $tt-bg-color;
    color: $tt-text-color;
    border: 2px solid $tt-border-color;
  }
  .arrow {
    width: 11px;
    height: 11px;
    border: 2px solid $arrow-border-color;
    bottom: 1px;
    &:before {
      width: 11px;
      height: 11px;
      background: $arrow-bg-color;
      border: 0;
    }
  }
  &.bs-tooltip-top {
    .arrow {
      transform: rotate(-135deg);
    }
  }
  &.bs-tooltip-bottom {
    .arrow {
      transform: rotate(135deg);
      top: 2px;
    }
  }
}

CSS :

.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px;
  height: 11px;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}

Live-Beispiel:

jQuery(document).ready(function(){
 $('a').tooltip();
});
.tooltip .tooltip-inner {
  background: black;
  color: lime;
  border: 2px solid lime;
}
.tooltip .arrow {
  width: 11px!important;
  height: 11px!important;
  border: 2px solid lime;
  bottom: 1px;
}
.tooltip .arrow:before {
  width: 11px;
  height: 11px;
  background: black;
  border: 0;
}
.tooltip.bs-tooltip-top .arrow {
  transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
  transform: rotate(135deg);
  top: 2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<div class="text-center py-4">
<a class="cn-box big cn-copy" data-toggle="tooltip" data-placement="bottom" title="Hello There">
  try me
</a>
</div>
Erweitern Sie das Snippet

— Nadav
quelle
0

Der einzige Weg für mich zu arbeiten:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}
— Vivien
quelle
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>
Erweitern Sie das Snippet

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

— Dragos Nitescu
quelle
0

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

https://jqueryui.com/tooltip/#custom-style

CSS

  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }

HTML

<div class="qu_help" data-toggle="tooltip" title="Some Random Title"> 
   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>

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

— JhWebDev
quelle
0

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

$(function(){
    //$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
    $('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});
.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow, 
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Made by @Ram"
   class="tooltips red-tooltip">My link with red tooltip</a>
Erweitern Sie das Snippet

Kein Tee:

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

Anmerkung B:

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

Anmerkung C:

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

— RAM
quelle
0

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

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

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

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

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {

    border-top-color: #d19b3d !important;
    border-width: 10px 10px 0;
    bottom: -5px;
}

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

— deusoz
quelle
Ich habe es versäumt, einen anderen Aspekt zu erwähnen: Wenn ich die Randbreite des Tether-Elements erhöhe, muss ich auch mit dem Randstil wieder in die Mitte positionieren. Um also vom Standardrand mit 5 Pixel zum Rand mit 10 Pixel zu wechseln, musste ich auch den Standardrand nach links ändern: -5 Pixel; am linken Rand: -10px;
— Deusoz
0

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

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

Beispiel: https://www.bootply.com/UORR04ncTP

Bootstrap 4:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    $(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});

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

Vollständige Lösung (Bootstrap 3)

JS

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});

$('body').tooltip({ 
    selector: "[title]", 
    html: true
});

HTML

<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>

CSS

.tooltip.tooltip-large > .tooltip-inner {
    max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
    text-align: left;
}

.tooltip.top.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
    border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
    border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
    border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}
— Sergey Nudnov
quelle
0

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

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

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

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

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

Hoffe dir zu helfen

— Salve
quelle
0

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

Vorteile dieses Ansatzes:

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

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

Erstellen Sie Ihr Original-Mixin:

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

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

    //define a color
$m-color-blue: #004c97;

//create a mixin with parameters and default value
@mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {

//reference your custom class name
#{$name} {
    .tooltip-inner {
        background-color: $color;
    }

    //create a list of possible directions
    $directions: top bottom left right;

    //loop through the list
    @each $direction in $directions {
        &.bs-tooltip-#{$direction} .arrow:before,
         .bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
            border-#{$direction}-color: $color !important;
        }
     }
  }
}


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

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

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


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

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

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

     <span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>


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

Hoffe das hilft!

— klewis
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.