Popover/Tooltip doesn't appear on `disabled` elements

[brandongregoryscott]

Steps to reproduce:

Wrap a disabled element (such as a Button or TextInput with a Tooltip or a Popover that's triggered on hover, such as:

<Popover
  trigger="hover"
  content={
    <Pane width={240} height={240} display="flex" alignItems="center" justifyContent="center" flexDirection="column">
      <Text>PopoverContent</Text>
    </Pane>
  }
>
  <Button disabled={true}>Trigger Popover</Button>
</Popover>

<Tooltip content="Edit title">
  <IconButton disabled={true} icon={EditIcon} />
</Tooltip>

The Tooltip or Popover will not appear on hover. It's hard to say whether this is a bug or simply undocumented behavior, but I'd be curious to see if others are expecting it to work this way or not.

It is often desirable to provide the user with additional context on a disabled control with a Tooltip - currently, we are using a workaround that wraps the Button in a Pane so the immediate target element that the Tooltip or Popover anchors to isn't disabled, i.e.

<Tooltip content="Edit title">
  <Pane display="inline-flex">
    <IconButton disabled={true} icon={EditIcon} />
  </Pane>
</Tooltip>

[simona1245]

https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

according to stackoverflow this is a normal behavior of browser. In order to avoid OR overcome this issue you need to wrap it in a div or anything in particuar, just as you did.

I'd like to receive other opionios of developers whether should we automate creating a div or leave it as it is.

[brandongregoryscott]

Following up on this - I think this is generally avoided for accessibility reasons. https://github.com/twilio-labs/paste/discussions/765#discussioncomment-80009 Going to close this out as I don't think we want to introduce more accessibility issues.