Bootstrap 带有长箭头的工具提示 css 或任何其他选择

Question

我会将我的字段工具提示设置为带有长箭头的样式，这样它们就不会覆盖控件之后或下方的任何后续 field/icons。类似于下图。

如何设置 bootstrap 工具提示的样式，使其像图片中那样带有长箭头。任何基于 CSS 的跨浏览器兼容解决方案都是完美的。

Answer 1

你真的需要 post 更多 code/details 才能期待这里的人帮你做这件事。

这是一个简单的演示：

$('.btn').tooltip({
  boundary: 'window'
})

button.btn {
  margin: 1em;
}

.tooltip-inner {
  margin-left: 40px;
}

.tooltip-inner:before {
  content: "";
  position: absolute;
  background: black;
  height: 1px;
  width: 40px;
  left: 5px;
  top: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

Bootstrap 带有长箭头的工具提示 css 或任何其他选择

Bootstrap tooltip with long arrow with css or any other alternative

css

twitter-bootstrap-tooltip