欢迎访问淘淘IT!QQ:505342486

bootstrap中tooltip()提示框的样式怎么改

时间:2018-08-16 15:36:12    来源:网络    浏览:325

$('.willDo').tooltip() 这个是bootstrap中的提示插件,默认提示框的背景是黑色的,我要怎么把背景或其他样式改掉呢

找到bootstrap.css 5536-5594行,复制出来

.tooltip-inner改提示框的背景颜色,.tooltip-arrow改各个三角箭头的颜色。

只修改字体颜色,背景颜色,三角颜色就可以了,修改后的css代码为:

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #5cb85c;
  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: #5cb85c;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #5cb85c;
}
.tooltip.top-right .tooltip-arrow {
  right: 5px;
  bottom: 0;
  border-width: 5px 5px 0;
  border-top-color: #5cb85c;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #5cb85c;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #5cb85c;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #5cb85c;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #5cb85c;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #5cb85c;
}
修改后的样式为:

from clipboard


来源网址:https://segmentfault.com/q/1010000006702922

有帮助
(0)
0%
没有帮助
(0)
0%
标签: bootstrap  Tooltip  提示框  

网友评论

网友评论文明上网理性发言
昵称:

全部评论0条)

o(╯□╰)o 暂无评论,我要抢沙发。
栏目列表
点击排行
more