Tooltips around disabled items

[claudiaareneee]

I want to use the Tooltip component to wrap around a disabled button. What's the best/easiest way to get the tooltip to show up when the button is disabled?

For example, I have this code:

<Tooltip content={disabledState ? "some error message" : "some info message"}>
  <IconButton 
    disabled={disabledState} 
    onClick={handleEvent}>
      {<SvgMoon />}
  </IconButton>
</Tooltip>

Whenever I hover over the disabled button, I don't get the tooltip.

Thanks in advance!

[mayank99]

This is a long-known problem that was recently fixed in #1461 (v3). What version of iTwinUI are using?

[claudiaareneee]

That was fast! I'm using an older version (1.43.1) (which I know is realllly outdated). Good to know it's fixed now though. I have a solution that works while we're in the middle of upgrading.

(If anyone's in the same boat as me, I'm intercepting mouse events and using that to manually show or hide the tooltip.)

[veekeys]

Hey @claudiaareneee,
We are wrapping IconButton with div and adding ref to that div to use the tooltip.
I think it is a little easier solution.
i.e.

<Tooltip content='Tooltip' placement="top" reference={buttonRef} />
<div ref={buttonRef}>
  <IconButton
    onClick={onEdit}
    disabled={isDisabled}
    label='Edit roles'
  >
   <SvgEdit />
  </IconButton>
</div>

Also, added css on div to have disabled pointer.