Tooltips

Tooltips are brief floating messages intended to help a user understand a specific item or feature.

Examples & Guidelines

  • Tooltips typically are triggered by hovering/focusing or by clicking. This must be specified for each instance. Triggering by hover should be limited as this implementation doesn’t work for touch devices.
  • Tooltips that are triggered by hover or focus should disappear when focus shifts or the user mouses away from the target.
  • Tooltips that are triggered by clicking should disappear when the user clicks away from the tooltip.
  • Tooltips should be brief. They should not contain rich information like images or buttons.

Placement

Tooltips should be centered on their target. If the tooltip is cut off by the edge of the viewport, flip its orientation.

Default

Left tooltip

Top tooltip

In the late summer of that year we lived in a house in a village that looked across the river and the plain. In the late summer of that year we lived in a house in a village that

Bottom tooltip

Right tooltip

Right tooltip right tooltip right tooltip