it-swarm.com.de

Bootstrap-Tooltip-Farbe ändern

Was ich versuche zu tun ist, die Tooltip-Farbe in Rot zu ändern. Ich möchte jedoch auch mehrere andere Farben haben, damit ich nicht einfach die ursprüngliche Tooltip-Farbe ersetzen möchte.

Wie würde ich das machen?

104
John Smith

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 aktuellsten 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 Snippet:

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

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

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

.tooltip.show {
  opacity: 1;
}

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

Bootstrap 2

Wenn Sie auch den Pfeil/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 für die Richtung des Tooltips in Bootstrap 3 spezifisch sein. Zum Beispiel:

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

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

100
technoTarek

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>

54
Tuyen Cao

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

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

Hier ist Tooltip-Code in Bootstrap ...

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

Für Bootstrap4 habe ich 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;
}

6
GOTOLR

mein jQuery-Update:

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

Wichtig zu beachten: Ab Bootstrap 4 können Sie diese Stile direkt in Ihrer Bootstrap-Sass-Variablendatei anpassen. In _variables.scss stehen Ihnen folgende Optionen zur Verfügung:

//== 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 mit Grunt- oder Gulp-Build-Tools kompilieren.

4
Eric Grotke

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;
    }
3
Akther Hussain

Keine der obigen Antworten funktioniert im Fall von container: 'body' gut 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 initialisieren, indem Sie eine benutzerdefinierte CSS-Klasse über das data-tooltip-custom-class-Attribut übergeben:

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

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

Bootstrap 3 + SASS für bottom Tooltip: 

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

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

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

Scheint in Bootstrap 4 geändert worden zu sein

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

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

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

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 Designs verwenden, damit das Erscheinungsbild konsistent ist. Leider gibt es keine integrierte Unterstützung für Motive für Bootstrap, daher habe ich ein kleines Stück CSS geschrieben, das dies tut. Grundsätzlich erhalten Sie tooltip-info-, tooltip-warning etc-Klassen, die Sie dem Element hinzufügen können, um das Thema anzuwenden.

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

2
Shital Shah

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 es nicht (Bootstrap 3).
Wenn jemand weiß, wie man damit umgeht?!?

2
C0ZEN

BootStrap 4

Bei Verwendung von BootStrap 4 wird der Tooltip an den unteren Rand des Body-Tags angehängt. Wenn Ihre QuickInfo ein untergeordnetes Element eines anderen Tags ist, können Sie die QuickInfo nicht mit CSS als Ziel festlegen. Ich habe festgestellt, dass dies nur funktioniert, wenn ich das insert.bs.tooltip -Ereignis verwende und dem inneren div und dem Pfeil eine Klasse hinzufüge. 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>
2
Kokomo

Dies ist bereits richtig beantwortet worden, aber ich denke, ich sollte auch meine Meinung dazu sagen. Wie Cozen sagt, dass dies eine Grenze ist, und um funktionieren zu können, müssen Sie die Klassen angeben, um diese auf dieselbe Weise zu formatieren, wie sie Bootstrap angibt. Sie können das also tun 

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

oder Sie können das nächste tun, nur für den Tooltip-Pfeil, aber Sie müssen das! wichtig hinzufügen, damit es die Bootstrap-Datei überschreibt

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

Die Farbe des Tooltips in bootstrap4 wird geändert. Sie können bottom, .__ verwenden. links, rechts, um CSS für die jeweilige Position in .bs-tooltip-top hinzuzufü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;
}
1
Manish

Sie können diesen Weg verwenden:

Und im CSS:

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

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>

Kein Tee: 

Wennjs code include .data('tooltip') für Sie nicht funktioniert, dann kommentieren Sie die Zeile und uncommentjs code include .data('bs-tooltip').

Anmerkung B: 

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

Anmerkung C: 

Diese Codes unterstützen tooltip arrow color in allen Platzierungen des Tooltips (top, bottom, left, right).

0
RAM

für Bootstrap 4 Version über CSS:

wenn Sie die Hintergrundfarbe vonvon Ballonändern möchten:

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

wenn Sie den Pfeil ändern möchten, wenn er inunterer Position erscheint:

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

Hoffe dir zu helfen

0
Salvo

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

So habe ich die Farbe geändert und den unteren Pfeil verdickt. Für jedes der Randbreite hinzugefügte Pixel musste ich ein Pixel von der "unteren" Position abziehen. 

.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 die Position für andere Positionen anpassen, d. H. Für .tooltip.bs-Tether-Element-Attached-Left würden Sie den Rand nach rechts anpassen und die Position ändern, wenn Sie die Randbreite durch Abziehen von Pixeln von "links" usw. erhöhen.

0
deusoz

Wenn Sie in Ihrem BS4-Projekt SASS-Code kompilieren können, können Sie die Möglichkeit nutzen, ein Mixin zu 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 das Stylen umfasst.
  • 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
  • Legen Sie zwei Parameter fest (einen für den benutzerdefinierten Klassennamen Ihres Tooltips und einen 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;
            }
         }
      }
    }
    


Rufe dein Mixin auf (passe Klassennamen und Farbe an)

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

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


Setzen Sie Ihren BS4 Tooltip in Ihr Layout (Richtung anpassen)

  • Fügen Sie abschließend Ihrem Layout einen BS4-Tooltip hinzu, und geben Sie ihm eine benutzerdefinierte Klasse für mehr Flexibilität. Diese BS4-Ressource befasst sich mit der Verwendung von Vorlagen als Option. Damit fügen wir unsere benutzerdefinierte Klasse hinzu.

  • Im folgenden Beispiel wird eine QuickInfo 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 Original-Mixin zu berühren . Wie cool ist das :)

Hoffe das hilft!

0
klewis

Olegs Antwort https://stackoverflow.com/a/42994192/9921853 ist das Beste dort . Es erlaubt die Verwendung der Tooltip-Styles auf die dynamisch erstellten Elemente ..__ Bootstrap 4. Es sollte etwas geändert 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

Full Solution (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;
}
0
Sergey Nudnov

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

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

Wir verwenden bootstrap 3.0 auf unserer Website, aber bei der Aktualisierung des Styling des Tooltips hat keiner der oben genannten Schritte funktioniert. Ich habe jedoch stattdessen eine Lösung mit jQueryUI-Stil 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.

0
JhWebDevGuy

Der einzige Weg für mich zu arbeiten:

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

Das hat bei mir funktioniert.

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

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

$(document).ready(function(){
  $('.tooltips-elements')
    .tooltip()
    .each(function() {
        var color = $(this).data('color');
        $(this).hover(function(){
        	var aria = $(this).attr('aria-describedby');
        	$('#' + aria).find('.tooltip-inner').css({
	        	"background": color,
	        	"color" : "#333",
	        	"margin-left" : "10px",
	        	"font-weight" : "700",
	        	"font-family" : "Open Sans",
	        	"font-size" : "13px",
	        });
	        $('#' + aria).find('.tooltip-arrow').css({
	        	"border-bottom-color" : color,
	        });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" class="tooltips-elements" data-toggle="tooltip"  data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>

Überprüfen Sie dies vielleicht kann es Ihnen helfen. Sie können mehrere Tooltips-Farben haben.

0
Dragos Nitescu