如何在Bootstrap 4中添加工具提示箭头边框颜色?

时间:2019-03-27 19:38:59

标签: javascript html css twitter-bootstrap bootstrap-4

如何更改工具提示箭头的背景颜色和边框颜色?我正在使用Bootstrap 4。

我希望背景颜色为#FFFFFF,边框颜色为箭头的粉红色,以便箭头看起来像所附的照片。

关于, 比尔

enter image description here

// 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>

0 个答案:

没有答案