Idiomatic way to use Tooltips with buttons for touch vs hover devices?

3 replies
Last updated: Dec 1, 2025
Is there an idiomatic way to use Tooltips with buttons?
E.g. the following example is a bit a clunky on a touch device, since tapping the button also shows the tooltip (which just then sticks around) – which can be a bit awkward!
https://www.sanity.io/ui/arcade?mode=jsx&jsx=eJxVT0EOgjAQvPuKTS8ciR48GEoifsEPkLIhja[…]on=A+basic+example+of+using+the+Tooltip+primitive+in+Sanity+UI .
Ideally, I’d like to be able to recreate the behaviour of the existing publish button in Sanity (where you see a tooltip on hover with
fine pointers, but on touch devices / coarse pointers, tapping the button doesn’t reveal the tooltip)
AI Update

Great question! You're right that the default tooltip behavior can feel awkward on touch devices where tapping shows a tooltip that just sticks around.

While I can't find documented support for a disabled prop on the Sanity UI Tooltip component, there are a few approaches you can take to achieve touch-friendly tooltip behavior:

1. Use CSS pointer media queries to conditionally render the tooltip:

import {Button, Tooltip} from '@sanity/ui'
import {useEffect, useState} from 'react'

function TooltipButton() {
  const [showTooltip, setShowTooltip] = useState(true)
  
  useEffect(() => {
    // Check if device has a coarse pointer (touch)
    const isCoarsePointer = window.matchMedia('(pointer: coarse)').matches
    setShowTooltip(!isCoarsePointer)
  }, [])

  return showTooltip ? (
    <Tooltip content="Helpful information">
      <Button text="Click me" />
    </Tooltip>
  ) : (
    <Button text="Click me" />
  )
}

2. Wrap conditionally based on pointer capability:

const isCoarsePointer = window.matchMedia('(pointer: coarse)').matches
const button = <Button text="Click me" />

return isCoarsePointer ? button : (
  <Tooltip content="Helpful information">
    {button}
  </Tooltip>
)

3. Consider alternative patterns for touch devices:

Since tooltips are hover-based UI patterns that don't translate well to touch, you might want to:

  • Make button labels more descriptive so they don't need tooltips
  • Use a separate help icon that opens a popover on tap
  • Add contextual help text that's always visible on touch devices

The key insight is that @media (pointer: coarse) detects touch devices, while @media (pointer: fine) detects devices with precise pointing (like mice). This is more reliable than user-agent sniffing and aligns with how modern responsive design handles input modalities.

Without access to Sanity Studio's internal implementation, I can't confirm exactly how the publish button handles this, but the pointer media query approach is the standard web platform solution for this use case.

Show original thread
3 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?