如何更改工具提示箭头的背景颜色和边框颜色?我正在使用Bootstrap 4。
我希望背景颜色为#FFFFFF,边框颜色为箭头的粉红色,以便箭头看起来像所附的照片。
关于, 比尔
// Bootstrap Tooltip
$(function() {
$('[data-toggle="tooltip"]').tooltip({
trigger: 'click'
})
})
.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 !important;
color: rgb(0, 0, 0, .7) !important;
border: 2px solid pink;
text-align: left;
}
<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" />
<br><br><br>
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="This is a test"><span class="tooltip-qm">?</span>
</div>