Use Tooltip in GridListItem

[CurryYangxx]

I have a GridList and I want to show a tooltip when user hover on the GridListItem. I read the doc and it seems the tooltiptrigger only can be Button. So I have components nested like this:

<GridList
  onSelectionChange={handleSelectionChange}
  selectedKeys={activeTabId ? [activeTabId] : []}
  items={items}
>
  {item => {
    return (
      <GridListItem>
        <TooltipTrigger>
          <Button className='relative flex items-center h-full w-full px-[20px] flex-nowrap'>
            <ItemContent />
          </Button>
          <Tooltip>
            <span className='text-red-500'>TAB TOLLTIP</span>
          </Tooltip>
        </TooltipTrigger>
      </GridListItem>
    );
  }}
</GridList>

But it seems the Button trigger has an event conflict with GridList, when I click a GridListItem, will not trigger onSelectionChange function. I want to ask if I can use other component as the tooltip trigger?

[CurryYangxx]

I am also confused about the nesting restrictions of aria components. It seems that our documentation does not specify which components can be nested in each other. During the development process, I often need to try different component nesting to make it work.

[snowystinger]

If the button is the entire cell, then there is nowhere that is not the button to click on. Therefore, selection change is not possible. You could add a checkbox so that users can select that way, as we do here https://react-spectrum.adobe.com/react-aria/GridList.html#example

Right now, Tooltips can primarily be used only with buttons, though we're working on possibly expanding that a little bit.

In general, we do not advise using Tooltips, they are not available to all users. Touch users cannot ever see a tooltip. Therefore, if you have some critical information in that GridList cell, we suggest you make it available another way. For instance, a truncated name in the cell could be made available with text wrapping, or resizing columns, or a meta data panel that appears when the item is selected.