melt-ui: Tooltip doesn't work on iPhone

Describe the bug

@TGlide, hi!

It seems like the tooltip doesn’t work on iPhone even on the melt-ui website.

Reproduction

It’s reproducible even on the melt-ui website — https://melt-ui.com/docs/builders/tooltip.

https://github.com/melt-ui/melt-ui/assets/55146773/e6744ec6-b1e6-4f47-bfba-dc148956d33a

Logs

No response

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 950.44 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.3.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
    bun: 1.0.7 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @melt-ui/svelte: ^0.70.0 => 0.70.0 
    @sveltejs/kit: ^1.20.4 => 1.30.3 
    svelte: ^4.0.5 => 4.2.8

Severity

annoyance

About this issue

Original URL
State: open
Created 5 months ago
Comments: 22 (11 by maintainers)

Most upvoted comments

@TGlide, @huntabyte, btw, do you have a roadmap for the melt-ui? Or at least some sketchy plans? I’m using the library in production, so it’d be nice to understand where the project is heading.

Nothing super laid out. You’ll find most of our plans here in issues, discussions, and sometimes in the Discord. RN the focus is getting 1.0 up and running. That means a focus on stability, fixes, testing, docs, etc.

TGlide on Jan 22, 2024

So what about the scenario where you want something to trigger on hover (mouse) OR click (touch)?

Tooltip is not intended for this.

The shadcn-svelte documentation says

Sorry, but that’s not relevant. Melt’s documentation is the important bit here.

Is it because of the name? I pick a component based on the behaviour I want and expect.

Of course it’s not because of the name. They have different behaviours, accessibility concerns, etc. E.g. a popover can have interactible content inside it, a tooltip cannot.

Is a popover magically more accessible than a Tooltip?

No such thing, it’s just more suitable in certain situations.

is the obvious and intuitive way to display this information.

Obvious to whom? Will screen readers say that you should long press it? Is there a consensus to have tooltips on any button? You need to hover a button before clicking it, so a tooltip naturally appearing is a nice bonus. And tooltips generally work this way.

Long pressing does not necessarily bring tooltips in other places. It’s not a standard in any shape or form.

Being a UI library, the choices we make greatly impact the web, specially as it grows. We can’t be careless and assume, things need to be done with a lot of thought, evidence, and study.

TGlide on Feb 27, 2024

I tried using Popover on mobile and Tooltip on desktop. It 100% works but adds so much complexity to the code, affecting DX.

I’m not that into accessibility and don’t know a lot of nuances, but from the info you provided, it’s clear that tooltips should work on touch devices.

Tooltips should only ever contain non-essential content. The best approach to writing tooltip content is to always assume it may never be read.

I don’t see any contradictions between the above statement and a functional tooltip on mobile. The content is non-essential anyway. It doesn’t matter whether you’re on a touch device or a desktop/laptop.

But maybe it’s only my naive opinion.

fromaline on Jan 23, 2024