BootStrap5应用时tooltips的添加

BootStrap5应用时tooltips的添加

官方示例

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
<!--
title 即所需要提示的信息
data-bs-placement 展示的位置（上下左右 四个位置）
-->

注意事项

//  一下语句 为 tooltips进行赋能， 需要在 渲染含有 tooltips的节点之后调用 （无论是 初始化 时还是 在 js 动态改变 DOM 时
var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

官网详情 https://v5.bootcss.com/docs/components/tooltips/