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

Question

但是我遇到了一个问题。当我将 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:

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

Answer 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>

Answer 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>

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

Tooltip is not working in bootstrap 5 beta1 with an svg?

javascript

jquery

svg

twitter-bootstrap

bootstrap-5