[tooltip] Change default Tooltip position to "top"

[lukaselmer]

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]

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]

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]

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]

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]

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

👍

[mj12albert]

Let's make this "waiting for upvotes" in the mean time!

If you want to see this implemented, please add a 👍🏼 reaction to the issue's description ~