工具提示插件按需生成内容和标记，默认情况下将工具提示放置在其触发元素之后。

通过 JavaScript 触发工具提示：

var exampleEl = document.getElementById('example')
      var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
      var tooltip = new bootstrap.Tooltip(exampleEl, {
        boundary: document.body // or document.querySelector('#boundary')
      })

标记

工具提示所需的标记只是您希望拥有工具提示的 HTML 元素上的数据属性和标题。 生成的工具提示标记相当简单，尽管它确实需要一个位置（默认情况下，由插件设置为顶部）。

<!-- HTML to write -->
      <a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

      <!-- Generated markup by the plugin -->
      <div class="tooltip bs-tooltip-top" role="tooltip">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">
          Some tooltip text!
        </div>
      </div>

禁用元素

具有 disabled 属性的元素不是交互式的，这意味着用户无法聚焦、悬停或单击它们来触发工具提示（或弹出框）。 作为一种解决方法，您需要从包装器 <div> 或 <span> 触发工具提示，理想情况下使用 tabindex="0" 使键盘可聚焦。

选项

选项可以通过数据属性或 JavaScript 传递。 对于数据属性，将选项名称附加到 data-bs-，如 data-bs-animation=""。 通过数据属性传递选项时，请确保将选项名称的大小写类型从驼峰式大小写更改为短横线隔开式。 例如，不要使用 data-bs-customClass="beautifier"，而是使用 data-bs-custom-class="beautifier"。

使用带有 popperConfig 的函数

var tooltip = new bootstrap.Tooltip(element, {
        popperConfig: function (defaultBsPopperConfig) {
          // var newPopperConfig = {...}
          // use defaultBsPopperConfig if needed...
          // return newPopperConfig
        }
      })

方法

show

显示元素的工具提示。在工具提示实际显示之前（即在 shown.bs.tooltip 事件发生之前）返回给调用者。这被认为是工具提示的“手动”触发。从不显示具有零长度标题的工具提示。

tooltip.show()

hide

隐藏元素的工具提示。 在工具提示实际被隐藏之前（即在 hidden.bs.tooltip 事件发生之前）返回给调用者。 这被认为是工具提示的“手动”触发。

tooltip.hide()

toggle

切换元素的工具提示。 在工具提示实际显示或隐藏之前返回给调用者（即在 shown.bs.tooltip 或 hidden.bs.tooltip 事件发生之前）。 这被认为是工具提示的“手动”触发。

tooltip.toggle()

dispose

隐藏和销毁元素的工具提示（删除 DOM 元素上存储的数据）。 使用委托（使用选择器选项创建）的工具提示不能在后代触发器元素上单独销毁。

tooltip.dispose()

enable

使元素的工具提示能够显示。 默认情况下启用工具提示。

tooltip.enable()

disable

移除显示元素工具提示的能力。 工具提示只有在重新启用后才能显示。

tooltip.disable()

setContent

提供一种在初始化后更改工具提示内容的方法。

tooltip.setContent({ '.tooltip-inner': 'another title' })

toggleEnabled

切换显示或隐藏元素工具提示的能力。

tooltip.toggleEnabled()

update

更新元素工具提示的位置。

tooltip.update()

getInstance

允许您获取与 DOM 元素关联的工具提示实例的静态方法。

var exampleTriggerEl = document.getElementById('example')
      var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

静态方法，允许您获取与 DOM 元素关联的工具提示实例，或者在未初始化的情况下创建一个新实例。

var exampleTriggerEl = document.getElementById('example')
      var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

事件

var myTooltipEl = document.getElementById('myTooltip')
      var tooltip = new bootstrap.Tooltip(myTooltipEl)

      myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
        // do something...
      })

      tooltip.hide()