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

Viewed 845

Currently I'm using Bootstrap 5 beta1.

But I face a problem. When I use tooltip with button it working good. But If I use tooltip with an icon (svg, feather icon), it's not working.

On another things. If I use tooltip with svg it working 1st time. Please check.

Here is my code:

$(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>

I also checked bootstrap 5 beta1 tooltip example. But I face same problem here.

Check here it's not working. See svg with tooltip section:

Please anyone give me a solution. Thanks in advance.

2 Answers

This worked for me as a temporary solution:

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>

Similar to @dev's response, for me it only worked within another element (in addition to the cursor setting):

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