[tooltip] Change default of Tooltip position to "top" (at least for touch devices)

lukaselmer commented 3 months ago

Summary

Tooltips should be placed by default on top for touch devices.

interface TooltipProps {
  // [...]
  /**
   * Tooltip placement.
   * @default 'top' for touch devices, 'bottom' otherwise
   */
  placement?:
    | 'bottom-end'
    | 'bottom-start'
    | 'bottom'
    | 'left-end'
    | 'left-start'
    | 'left'
    | 'right-end'
    | 'right-start'
    | 'right'
    | 'top-end'
    | 'top-start'
    | 'top';
  // [...]
}

Possible implementation:

import { Tooltip as MuiTooltip, TooltipProps, useMediaQuery } from '@mui/material'

export function Tooltip(props: TooltipProps) {
  const isTouch = useMediaQuery('(pointer: coarse)')
  const placement = props.placement ?? (isTouch ? 'top' : undefined)
  return <MuiTooltip {...props} placement={placement} />
}

Examples

https://m3.material.io/components/tooltips/guidelines#57286ec2-db8e-4699-aa43-0ca11cab0bb5

Motivation

A (plain) tooltip is hidden under the finger which is touching the screen. So the finger has to be moved, or the finger has to be flipped upside down to view the tooltip. Sometimes, the users don't even see the tooltip, because it is hidden under their finger.

Search keywords: tooltip touch position

Search keywords:

oliviertassinari commented 3 months ago

On mobile, Google Drive behaves like this indeed, it makes sense to me:

On desktop, this sounds like an absurd default, e.g.

https://m3.material.io/components/tooltips/guidelines#57286ec2-db8e-4699-aa43-0ca11cab0bb5

atomiks commented 3 months ago

This is already the case for the Tooltip in the new Base UI. However, Tooltip intentionally doesn't work for touch input in the new Base UI. Alternatives will be documented. (cc: @colmtuite)

absurd default

Why is it absurd?

oliviertassinari commented 3 months ago

Why is it absurd?

I assumed that 99% of the websites show tooltips on desktops below the target and so doing something different would confuse end-users.

Alternatives will be documented.

The problem is that to have an ejectable source for Material UI, we need the logic abstracted somewhere into an npm package. If not in Base UI, then OK, It could be:

@base-ui/react tooltip desktop
@material-ui/base wrapped version to with the mobile support (Android like UX)
@material-ui/md3 CSS in npm or ejected

colmtuite commented 3 months ago

I assumed that 99% of the websites show tooltips on desktops below the target

Not sure where you're getting that idea? The standard default (that most tooltips on the web outside of a header bar follows) is above the trigger. It's also the default for Radix and RA. So top makes sense as the default.

The problem is that to have an ejectable source for Material UI

We'll figure this out later, as we begin building v7 on top of Base UI.

oliviertassinari commented 3 months ago

Not sure where you're getting that idea? The standard default (that most tooltips on the web outside of a header bar follows) is above the trigger. It's also the default for Radix and RA.

@colmtuite Right ok, I got spoiled by Material Design (Google UIs) and GitHub UI that uses bottom. The placement between top and bottom depends: https://open-ui.org/components/tooltip.research/.

Design system where tooltip is at the bottom:

Material Design: https://material.angular.io/components/tooltip/overview
Carbon: https://carbondesignsystem.com/components/tooltip/usage/
Evergreen: https://evergreen.segment.com/components/tooltip
Atlassian: https://atlassian.design/components/tooltip/examples
Native title attribute on Chrome: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

We'll figure this out later

👍

mui / base-ui