jseird priority asked 3 years ago
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>
This topic is closed.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Priority
- 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