用bootstrap5写一个a标签,鼠标悬浮在这个a标签上触发弹出提示框(popovers),提示框内容包括标题和内容
时间: 2024-03-25 22:38:37 浏览: 92
Bootstrap实现提示框和弹出框效果
好的,下面是用 Bootstrap 5 写一个鼠标悬浮在 a 标签上触发弹出提示框的示例代码:
```html
<a href="#" class="btn btn-primary" data-bs-toggle="popover" title="标题" data-bs-content="内容">悬停在我上面</a>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
```
解释一下,上面的代码中:
- `data-bs-toggle="popover"` 表示这个链接被点击时会触发一个提示框;
- `title="标题"` 表示提示框的标题;
- `data-bs-content="内容"` 表示提示框的内容;
- `Popover` 是 Bootstrap 5 中的一个 JavaScript 组件,用来创建和管理提示框。
注意,为了让提示框正常工作,你需要在页面中引入 Bootstrap 5 的 JavaScript 文件和样式文件。
阅读全文