[RAC] Tooltips for non-interactive elements

[lucaas]

While we try to limit tooltip usage to only target interactive elements, we have a few use cases where we are aware of the issues with non-interactive elements and still want to provide additional information in tooltips for users using pointer devices only.

For example, we display a relative date when a comment was written but want to provide the ability to hover over and see the absolute date in a tooltip. This UX is pretty commonly used (e.g. see Slack, Linear, etc..).

My initial approach was to use the element as trigger for the tooltip, but that doesn't work unless the target is both Focusable and has an interactive-role.

const absoluteDate = '2025-04-01T12:00:00Z';
const relativeDate = '1 week ago';
const formattedDate = 'April 1, 2025';

<TooltipTrigger>
  <Tooltip> {formattedDate}</Tooltip>
  <time datetime="{absoluteDate}" dateTimeFormat="YYYY-MM-DDTHH:mm:ssZ">
    {relativeDate}
  </time>
</TooltipTrigger>

I worked around the issue in the following way, but I don't think that the focusable element is wanted or that the use of gridcell here is correct.

<TooltipTrigger>
  <Tooltip> {formattedDate}</Tooltip>
  <Focusable>
    <span role="gridcell" tabIndex={0}>
      {relativeDate}
    </span>
  </Focusable>
</TooltipTrigger>

[snowystinger]

It looks focusable to me in Slack?