Tippyjs: disabled buttons prevent the tooltip from showing

[mreinstein]

When I set a button element to disabled, it's tippy never displays on click or hover event. Is there a workaround for this?

[atomiks]

Yes: use a wrapper element that isn't disabled and apply the tooltip to that.

<div title="tooltip" tabindex="0">
  <button disabled>btn</button>
</div>

tippy('div')

[mreinstein]

sorry forgot to close this ticket. Definitely a good workaround, thanks!

[weber-d]

I'm having problems that the tooltip has a lot of margin to the input element if a wrapping div is used for showing tooltips on disabled elements.

Simle example: https://jsfiddle.net/xpvt214o/929062/

Could be worked around by setting the width for both elements so that the container is the leading element for the target with, and our input get width: 100%. But I would prefer a more clean solution. It would be the best if we got a fix from tippyjs so that tooltips can be shown for disabled elements.

Also having this explicity enabled via config is fine, because some users may don't want show tooltips for disabled elements. But in my case it's a problem since I want to use tooltips for notifying the user how he can request changes to readonly fields.

[atomiks]

Well a div is a block element, if you are wrapping an input use a span element instead

[weber-d]

@atomiks My fault, I was in a hurry and didn't think about it. Now it works as expected 👍
Maybe this workaround should be added in the documentation, when others may have the requirement of tooltips in disabled elements, too.