Tooltips in Labels don't trigger

[vankhoawin]

Hello team, maybe I'm doing something wrong but nesting a Tooltip inside of a Label doesn't seem to let it trigger (focuses on the label instead).

<Label htmlFor="addressRequirement">
  <Box display="flex" alignItems="center">
    <Text as="span" marginRight="space10">Address requirements</Text>
    <Tooltip text="Some local authorities require you to provide an address before purchasing a phone number.">
      <InformationIcon decorative={false} title="Open Tooltip" display="block" />
    </Tooltip>
  </Box>
</Label>

can't see my mouse, but hovering over the icon doesn't open up the tooltip:

[TheSisb]

Hi @vnguyen94,

This seems to be a bug because we don't currently forwardRefs on icons, and so you're probably seeing this error in console:

https://codesandbox.io/s/hidden-bird-2s6n6?file=/src/index.tsx

I'll add a ticket to fix this in our next sprint, as all of our components should be forwarding refs.

[vankhoawin]

Because I don't want to add any additional styling (or functionality like linking), I just want an icon with a tooltip

[vankhoawin]

so you're probably seeing this error in console:

I actually don't see that error 😬

edit: i do see that error in your csb link, but not in my application

[TheSisb]

Good point Simon. @vnguyen94 our guidance is as follows https://paste.twilio.design/components/tooltip#accessibility. It may have been done in the past, but that pattern is bad for a11y so we should work towards changing it.

edit: i do see that error in your csb link, but not in my application

😕 Not sure why that is tbh.

[vankhoawin]

actually looking back at code that you all helped me with before, we're doing this:

        <Tooltip text="some text"}>
          <Button size="reset" variant="reset">
            <Icon decorative={false} title="some title" />
          </Button>
        </Tooltip>

if this is still the recommended way, i'll go ahead and keep using this pattern

[vankhoawin]

.... and that was the issue! thank you, closing :)

[TheSisb]

Link to a more full answer here: #683 (comment)