Topic: Tooltip
As soon as a tooltip is applied onto a container that contains fa icons hovering the icon inside the container hides the tooltip and outputs errors to console: null is not an object (evaluating 'i._popper.destroy')
Expected behavior Tooltip to remain when button contains icon in text
Actual behavior Tooltip disappears and title attribute is added to container's inner element also. Thus causing the errors. further the tooltip is not displayed any longer when the user hovers the icon.
Resources (screenshots, code snippets etc.)
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="top"
title="Tooltip on top"
>
<i class="fas fa-clock"></i>
</button>
Thank you for your report, we will fix that in the near future. For now, quick fix is to add pointer-events: none style to your icon element, which should resolve your problem, e.g.:
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="top"
title="Tooltip on top"
>
<i class="fas fa-clock" style="pointer-events: none;"></i>
</button>
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: Desktop
- Browser: Chrome
- OS: MacOs ios linux
- Provided sample code: No
- Provided link: No