[BUG] - Tooltip component not working on mobile

[gianmarcodelfreo]

NextUI Version

2.2.3

Describe the bug

Tooltip component not working on mobile

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<Tooltip
    content={
      <div className="px-1 py-2">
        <div className="text-small font-bold">Pagina broadcast</div>
        <div className="text-tiny">
          Da questa pagina puoi gestire tutte le comunicazioni globali.
          <br />
          Ogni comunicazione verrà visualizzata da qualunque condominio
        </div>
      </div>
    }
    placement="right">
    <button type="button">
      <LuInfo />
    </button>
  </Tooltip>

Expected behavior

On the mobile touch the tooltip should be shown

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[iamkyle]

also experiencing this bug.

[black197]

I think under the hood React Aria makes this feature on purpose (see useHover). If you want to show Tooltip when user touches the button, you may have to implement it by controlled Tooltip and onPress event.

[Gian-Marco-27]

I think under the hood React Aria makes this feature on purpose (see useHover). If you want to show Tooltip when user touches the button, you may have to implement it by controlled Tooltip and onPress event.

Thx to your suggestion. At this point, i think it's better to use the popover component here https://nextui.org/docs/components/popover

[jimapl]

Can this issue be fixed? Im not really happy with applying hover events on my popovers! Kind or really relying on this in prod. Now having to switch back to semantic ui :(

[amirstepT]

This is a pain point and it doesn't work well in most component UI libraries. I tried MUI, AntD, chakra, mantine, shadcn, and a few others. On mobile, one would expect that a touch event should trigger the tooltip to open. In most of these UI libraries, it doesn't actually work at all on mobile. In some, the behavior is variable (AntD). MUI was the only one in which it worked consistently but it requires a deep touch on mobile to work (something I think most users won't think to do, or have the patience to do).

For next UI tooltip, I made it into a controlled component and played with different events. There is one scenarios that I found worked consistently with fewest unexpected consequences. You can get slightly different behavior if you take out the onPress event handler (in that case, on mobile you'll have to touch elsewhere in the document to get the tooltip to disappear).

const [ttOpen, setTTOpen] = useState(false);

        <Tooltip content="I'm a tooltip" isOpen={ttOpen}>
          <Button
            onMouseEnter={() => {
              setTTOpen(true);
            }}
            onMouseLeave={() => {
              setTTOpen(false);
            }}
            onPress={() => {
              setTTOpen(prev => !prev);
            }}
          >
            Try Me
          </Button>

[OscarJVD]

also experiencing this bug.

[BrianErikson]

@amirstepT Thanks for this solution, it works beautifully. This resolves the issue I encountered with controlled Tooltips when using both onOpenChange and isOpen as per the NextUI Tooltip documentation -- the tooltips would stay stuck open when rapidly hovering from one tooltip to the next, as if the 'hover leave' event never fires on the Tooltip component.

For anyone else that ran into this issue (NextUI v2.2.9), go from

const [isOpen, setIsOpen] = useState(false);
return (
    <Tooltip
        content='Some content'
        isOpen={isOpen}
        onOpenChange={(open) => setIsOpen(open)}
    >
        <Button
            onPress={() => setIsOpen(!isOpen)}
        >
            Try Me
        </Button>
    </Tooltip>
);

to

const [isOpen, setIsOpen] = useState(false);
return (
    <Tooltip
        content='Some content'
        isOpen={isOpen}
    >
        <Button
            onMouseEnter={() => setIsOpen(true)}
            onMouseLeave={() => setIsOpen(false)}
            onPress={() => setIsOpen(!isOpen)}
        >
            Try Me
        </Button>
    </Tooltip>
);

Note: It removes the delay functionality from the tooltip but personally I'd rather it work on mobile and not have Tooltips stuck open when hovering from one Tooltip to another.