首页>经典在线

bootstrap tooltip 提示框的样式、提示字体颜色

2018-09-14 08:28:00 | 查看次数 156 | 分类: 经典在线 文章来源:来源:http://www.ifx666.cn

摘要内容:这个是bootstrap中的提示插件,默认提示框的背景是黑色的,我要怎么把背景或其他样式改掉呢

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.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;
改后的样式

上一篇: webservice视频教程-传智javaee就业班视频教程

下一篇: 锋利的jQuery读者可以系统地掌握jQuery的选择器、DOM操作等操作细节

验证码:
评论列表
  • 文章推荐

    09-19 | 查看次数 450

    《深入理解Spring Cloud与微服务构建》PDF下载

    09-14 | 查看次数 155

    bootstrap tooltip 提示框的样式、提示字体颜...

    09-01 | 查看次数 161

    json字符串与java对象互转,json字符串转化为map...

    08-04 | 查看次数 329

    java面试题及答案---2018核心Java面试问题与解答...

    08-03 | 查看次数 695

    java面试题及答案---2018核心Java面试问题与解答...

    最新评论
    文章标题:管理和发布文章java cms

    评论内容:能下载吗

    评论时间:2018-12-12 01:30:02

  • 返回顶部
    欢迎投稿
    返回底部