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,要做对应方向的替换

版权声明:著作权归作者所有。

相关推荐

Swift 3/4缩放UIImage的方法

给UIImage添加extension(兼容Swift3 和Swift 4)extension UIImage {     func scaled(withSize size: CGSize) -> UIImage {   &nbs

Swift修改UISearchBar上取消按钮文本的颜色

Swift 2,3,4在语法上少有不同,以下是各个Swift版本修改取消按钮文本颜色的代码片段Swift 4.0let cancelButtonAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]  UIBarButtonItem.appearan

Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。兼容多个浏览器的方法:::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color:    

使用Swift 3/Swift 4扫描二维码

iOS的AVFoundation内置了对二维码和条形码扫描的支持。使用AVFoundation扫描二维码的功能需要几件事:创建AVCaptureSession,用于捕获二维码创建预览捕获二维码成功后,委派回调来处理二维码的meta信息下面的例子是基于UIViewController开发的扫描二维码Controller,使用AVCaptureMetadataOutputObjectsDelegate

Swift3/Swift4 转换Html为纯文本

Swift 3或者Swift 4 添加String扩展,把Html字符串转换为纯文本Xcode 9 beta • Swift 4extension String {     var html2AttributedString: NSAttr