Components

AlertAutocompleteAvatarBadge & PillButtonCheckboxComboboxCorner DialogDialogFile UploaderFilepickerForm FieldGroupMenuOverlayPaginationPopoverPortalPositionerPulsarRadioSearch InputSelectSelect MenuSide SheetSpinnerStatus IndicatorSwitchTabTableTag InputText InputTextareaToasterTooltip

Tooltip

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

Open in GitHub
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.

Conditionally show Tooltip

In some cases you may want to only show a Tooltip when a certain condition is true. You can accomplish this by manually hiding the Tooltip with the isShown prop when it should never be shown, and leaving the component uncontrolled when you want it to display on hover (standard behavior).