如何解决带有长箭头的 Bootstrap 工具提示,带有 css 或任何其他替代方法
我会将我的字段工具提示设置为带有长箭头的样式,这样它们就不会覆盖控件之后或下方的任何后续字段/图标。类似于下图。
如何使用图像中的长箭头设置引导程序工具提示的样式。任何基于 CSS 的跨浏览器兼容解决方案都是完美的。
解决方法
您真的需要发布更多代码/详细信息,然后才能期待这里的人为您提供帮助。
这是一个简单的演示:
$('.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。