Bootstrap 4/3修改tooltip默认的颜色

这里以top的tooltip为示例：

Bootstap 3

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

Bootstrap 3 + SCSS

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

Bootstrap 4

这是Bootstrap 4生成的tooltiphtml：

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

在Bootstrap 4使用了.arrow::before来设置箭头的样式

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

.bs-tooltip-top .arrow::before {
    border-top-color: red;
}

Bootstrap 4 + SCSS

在Bootstrap支持在_variables.scss修改默认的配置，修改tooltip的默认配置：

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

其他方向的样式可以按top设置，注意border-top-color，要做对应方向的替换