如何更改工具提示箭头的背景颜色和边框颜色?我正在使用Bootstrap 4。
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
background: #f3f3f3;
border: 1px solid #737373;
color: #737373;
margin: 4px 121px 0 5px;
float: right;
text-align: left !important;
}
.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}
.tooltip-inner {
max-width: 236px !important;
height: 76px;
font-size: 12px;
padding: 10px 15px 10px 20px;
background: #FFFFFF;
color: rgb(0, 0, 0, .7);
border: 1px solid #737373;
text-align: left;
}
.tooltip.show {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
Codeply:https://www.codeply.com/go/DXTLRSDHcc
该帖子与该帖子的区别在于确定如何更改箭头本身(而不是图尖)的边框和背景颜色。所有的答案都表明您放置了上边框颜色以实现箭头的不同颜色。但我想实现箭头本身的不同边框颜色+背景颜色
答案 0 :(得分:3)
添加另一个将覆盖第一个伪元素的伪元素,然后将其稍微翻译以创建所需的视觉效果
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
background: #f3f3f3;
border: 1px solid #737373;
color: #737373;
margin: 4px 121px 0 5px;
float: right;
text-align: left !important;
}
.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}
.tooltip-inner {
max-width: 236px !important;
height: 76px;
font-size: 12px;
padding: 10px 15px 10px 20px;
background: #FFFFFF;
color: rgb(0, 0, 0, .7);
border: 2px solid red;
text-align: left;
}
.tooltip.show {
opacity: 1;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00!important;
/* Red */
}
.bs-tooltip-bottom .arrow::after {
content: "";
position: absolute;
bottom: 0;
border-width: 0 .4rem .4rem;
transform: translateY(3px);
border-color: transparent;
border-style: solid;
border-bottom-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
答案 1 :(得分:0)
我能够使其工作与Temani Afif相似。但是,我们最终改为使用弹出窗口,因此可以应用popover-box-shadow
。引导程序弹出窗口就像工具提示一样,只不过它们带有边框,因此没有必要对重叠箭头大惊小怪。另外,使用scss时,只需修改variables.scss文件即可进行绝大多数样式的设计。
要更改弹出框的背景颜色,请参见以下答案:Change bootstrap popover background color