Idiomatic way to use Tooltips with buttons for touch vs hover devices?
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 thread3 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.