web-dev-qa-db-ja.com

Bootstrap 4ツールチップの矢印の色を変更

ツールチップの矢印の色を赤に変更したい。私は1時間グーグルで検索しましたが、見つけたスニペットは機能しませんでした。

私の最後の試みは：

.tooltip-arrow {
  border-right-color: red;
  border-left-color: red;
  border-bottom-color: red;
  border-top-color: red;
}

ツールチップは右に配置され、左に配置されます。

cssbootstrap-4twitter-bootstrap-4
7
Diego Alves

あなたが探しているセレクターは.tooltip.bs-tether-element-attached-left .tooltip-inner::before：

.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: red;
}

すべてのツールチップの矢印を赤にしたい場合- jsfiddle ：

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: red;
}

.tooltip.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: red;
}

.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: red;
}

.tooltip.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: red;
}
6
tmg

bootstrap 4.1では次を使用できます：

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: red !important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: red !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: red !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: red !important;
}
7
Raul

私はbootstrap 4.0.0-beta.2。を使用していますが、このコードは私のために機能しました。

.tooltip.bs-tooltip-bottom .tooltip-inner {
    background:#444 !important;
}

.tooltip .arrow:before {
 border-bottom-color:#444 !important;
 border-top-color:#444 !important;
 }
3
kapil

Bootstrap 4.0.0＆Popper.js

左矢印のツールチップ：

.tooltip .tooltip-inner {
  background-color: green;
}

.tooltip .arrow::before {
  border-left-color: green;
}

CSSに追加するだけです。

2
Alex Glinsky

ツールチップ矢印の可変色用のjQueryプラグイン：

(function($) {
    $.fn.colortips = function(){
        return this.each(function() {
          var tt = $(this);
          tt.on('focus mouseenter', function(){
            var bc = tt.css('background-color');
            var tc = (tt.data('color')===undefined || tt.data('color')==='') ? '' : tt.data('color');
            var pt = tt.data('placement');
            $('.bs-tooltip-bottom.show .tooltip-inner').css({
              'background-color': bc,
              'color': tc
            });
            $('<style id="colortips-style">.bs-tooltip-bottom.show .arrow::before{border-'+pt+'-color: '+bc+';}</style>')
              .appendTo('head');
          }).on('focusout mouseleave', function(){
            $('.bs-tooltip-bottom.show .tooltip-inner').css({
              'background-color': '',
              'color': ''
            });
            $('#colortips-style').remove();
          });
        });
    }
}(jQuery));

例を参照 。

1
Choo Hwan

私は通常、bootstrap 4.3ツールチップスタイルを次のようにオーバーライドします。これは簡単なはずです：

/*Tooltip*/
.tooltip {
  font-family: "Roboto", "Tahoma", "Helvetica", sans-serif;
}

.tooltip > .arrow::before {
  border-bottom-color: #757E94;
}

.tooltip-inner {
  background-color: #757E94;
  color: white;
  font-style: italic;
}
1
Ashraf Abusada

For Bootstrap 4.3.1

HTMLファイルに追加

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

CSSファイルに追加

.tooltip-inner {
    background-color: red;
    color: #444;
    width: auto;
    max-width: 150px;
    font-size: 100%;
    white-space: nowrap;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: red;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: red;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: red;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: red;
}

Javascriptファイルに追加

$(document).ready(function () {
    $('.btn').tooltip();
});
0
P P