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.