工具提示在带有 svg 的 bootstrap 5 beta1 中不起作用？答案

【问题标题】：Tooltip is not working in bootstrap 5 beta1 with an svg?工具提示在带有 svg 的 bootstrap 5 beta1 中不起作用？
【发布时间】：2021-05-05 11:33:48
【问题描述】：

目前我正在使用Bootstrap 5 beta1。

但我面临一个问题。当我将tooltip 与按钮一起使用时，它运行良好。但是如果我使用带有图标的工具提示（svg，feather icon），它就不起作用了。

关于另一件事。如果我使用带有 svg 的工具提示，它会第一次工作。请检查。

这是我的代码：

$(function() {
  //call feather icon
  feather.replace()

  $('[data-bs-toggle="tooltip"]').tooltip();
})

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with button">
  Tooltip on left
</button>
</br>
<span data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with svg">
<i data-feather="help-circle"></i>
</span>

我还检查了 bootstrap 5 beta1 工具提示示例。但我在这里面临同样的问题。

检查这里它不起作用。 See svg with tooltip section:

请任何人给我一个解决方案。提前致谢。

【问题讨论】：

这是新版本的问题，在他们的 github repo isuees 中报告它是净值

标签： javascript jquery twitter-bootstrap svg bootstrap-5

【解决方案1】：

这对我来说是一个临时解决方案：

CSS：

svg { pointer-events: none; }

$(function() {
  //call feather icon
  feather.replace()

  $('[data-bs-toggle="tooltip"]').tooltip();
})

svg {
  pointer-events: none;
}

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with button">
  Tooltip on left
</button>
</br>
</br>
<span data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with svg">
<i data-feather="help-circle"></i>
</span>

【讨论】：

【解决方案2】：

类似于@dev 的回复，对我来说，它只在另一个元素中起作用（除了光标设置）：

<i title="tooltip title" data-bs-toggle="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--bs-cyan)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
</i>

【讨论】：