DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Tooltip

A tooltip is a descriptive or supplementary element that is displayed when an object is focused or hovered over.

Overview
Code

Props

NameTypeDescriptionDefault
Required
children
React.ReactNodeCustom content inside the container.-
labelstringText to be displayed inside the tooltip.-
position'bottom' | 'top' | 'left' | 'right'Preferred position for displaying the tooltip. It may adjust automatically based on available space.'bottom'

Examples

Basic Usage

() => {
    return (
      <DxcInset space="var(--spacing-padding-xl)">
        <DxcTooltip label="Tooltip Test" position="top">
          <DxcButton label="Hoverable button" />
        </DxcTooltip>
      </DxcInset>
    );
  }
On this page