Tooltip

The Tooltip component is used to show more content of a target.

DetailsProperties

Introduction

The Tooltip component is used to describe icon buttons. In some cases tooltips are used to show more content, this should be used cautiously since it is hard to be completely accessible.

Tooltip with IconButton

Each IconButton should always be wrapped in a Tooltip.

Tooltip to show some content

Use with caution, it’s hard to be completely accessible.

Tooltip with card appearance

Use with caution, it’s hard to be completely accessible.

Positioning the Tooltip

The Tooltip can be positioned on the following positions using the position prop:

  • Position.TOP
  • Position.TOP_LEFT
  • Position.TOP_RIGHT
  • Position.BOTTOM
  • Position.BOTTOM_LEFT
  • Position.BOTTOM_RIGHT
  • Position.LEFT
  • Position.RIGHT

For a Tooltip the only really useful sides are TOP, RIGHT, BOTTOM and LEFT as shown below.