Tooltip

jseird pro premium priority asked 2 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>

Marcin Luczak staff answered 2 years ago

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>

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • 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
Tags