Tooltip

A tooltip is a descriptive or supplementary element that is displayed when an object is focused or hovered over. They are typically employed to enhance user experience by offering brief and helpful descriptions, instructions or tips without cluttering the interface.

Props

Name	Type	Description	Default
position	`'bottom' \| 'top' \| 'left' \| 'right'`	Preferred position for displaying the tooltip. It may adjust automatically based on available space.	`'bottom'`
label	`string`	Text to be displayed inside the tooltip.	-
children	`React.ReactNode`	Content in which the Tooltip will be displayed.	-

Examples

Basic Usage

() => {
    return (
      <DxcInset space="2rem">
        <DxcTooltip label="Tooltip Test" position="top">
          <DxcButton label="Hoverable button" />
        </DxcTooltip>
      </DxcInset>
    );
  }

() => {
    return (
      <DxcInset space="2rem">
        <DxcTooltip label="Tooltip Test" position="top">
          <DxcButton label="Hoverable button" />
        </DxcTooltip>
      </DxcInset>
    );
  }

Tooltip

Props

Examples

Basic Usage

Contents