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

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

bootstrap Tooltip 提示框

打开边栏(ESC) 关闭边栏(ESC)

$('.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

赏

前一篇

AdminLTE管理后台提示框，Bootstrap框架提示框...

后一篇

Bootstrap进度条自定义

相关推荐

AdminLTE管理后台提示框，bootstrap框架提示框Tooltip

Bootstrap | 2018-08-16 12065

AdminLTE管理后台提示框 Bootstrap框架提示框Tooltip 实现方法： html代码： <span data-toggle="tooltip" title="提示框内容" data-placement="right">是</span> 页面头部需引入jquery.min.js...

bootstrap修改col的间距

Bootstrap | 2019-09-11 9630

用bootstrap布局时会产生一些问题，比如col水平间距过大修改方法：重新设置col之间的间距 [class*="col-"]{ padding: 5px; } 在bootstrap.css随便搜索col-md会发现，col每列之间之所以有间距，是因为col里面的左右内边距都是15px形成的，这样...