Tooltip

BETA

Component demo

Interactive example

Web component

React

<ic-tooltip
target="test-button-0"
label="Add Americano to favourites"
placement="top"
>
<ic-buttonid="test-button-0"aria-describedby="ic-tooltip-test-button-0">
    Add
</ic-button>
</ic-tooltip>
<ic-tooltip
target="test-button-1"
label="Remove Americano from favourites"
placement="bottom"
>
<ic-buttonid="test-button-1"aria-describedby="ic-tooltip-test-button-1">
    Remove
</ic-button>
</ic-tooltip>

<IcTooltip
target="test-button-0"
label="Add Americano to favourites"
placement="top"
>
<IcButton
id="test-button-0"
aria-describedby="ic-tooltip-test-button-0"
>
    Add
</IcButton>
</IcTooltip>
<IcTooltip
target="test-button-1"
label="Remove Americano from favourites"
placement="bottom"
>
<IcButton
id="test-button-1"
aria-describedby="ic-tooltip-test-button-1"
>
    Remove
</IcButton>
</IcTooltip>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The text to display on the tooltip. Required type: string
Property disableHover Attribute disable-hover	If`true` , the tooltip will not be displayed on hover, it will require a click. type: boolean	false
Property maxLines Attribute max-lines	The number of lines to display before truncating the text. type: number
Property placement Attribute placement	The position of the tooltip in relation to the parent element. type: IcTooltipPlacements - "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"	"bottom"
Property target Attribute target	The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used. type: string
Property theme Attribute theme	Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

Property

label

Attribute

label

The text to display on the tooltip.

Required

type: string

Property

disableHover

Attribute

disable-hover

Iftrue , the tooltip will not be displayed on hover, it will require a click.

type: boolean

Default: false

Property

maxLines

Attribute

max-lines

The number of lines to display before truncating the text.

type: number

Property

placement

Attribute

placement

The position of the tooltip in relation to the parent element.

Default: "bottom"

Property

target

Attribute

target

The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.

type: string

Property

theme

Attribute

theme

Sets the tooltip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

CSS Custom Properties

Name	Description
--ic-z-index-tooltip	z-index of tooltip

--ic-z-index-tooltip z-index of tooltip

Methods

Name	Description	Signature
Method displayTooltip	Method to programmatically show/hide the tooltip without needing to interact with an anchor element	displayTooltip(show: boolean, persistTooltip?: boolean) => Promise<void>

Method

displayTooltip

Method to programmatically show/hide the tooltip without needing to interact with an anchor element

displayTooltip(show: boolean, persistTooltip?: boolean) => Promise<void>

Variants

Left placement

Interactive example

Web component

React

<ic-tooltip
target="test-button"
label="Add Americano to favourites"
placement="left"
>
<ic-buttonid="test-button"aria-describedby="ic-tooltip-test-button">
    Add
</ic-button>
</ic-tooltip>

<IcTooltip
target="test-button"
label="Add Americano to favourites"
placement="left"
>
<IcButtonid="test-button"aria-describedby="ic-tooltip-test-button">
    Add
</IcButton>
</IcTooltip>

Right placement

Interactive example

Web component

React

<ic-tooltiptarget="test-button"label="Add Americano to favourites"placement="right">
<ic-buttonid="test-button"aria-describedby="ic-tooltip-test-button">Add</ic-button>
</ic-tooltip>

<IcTooltip
target="test-button"
label="Add Americano to favourites"
placement="right"
>
<IcButtonid="test-button"aria-describedby="ic-tooltip-test-button">
    Add
</IcButton>
</IcTooltip>

Chip

Interactive example

Web component

React

<ic-tooltiptarget="small-chip"label="An espresso-based drink">
<ic-chipid="small-chip"label="Americano"size="small">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"
/>
</svg>
</ic-chip>
</ic-tooltip>

<IcTooltiptarget="small-chip"label="An espresso-based drink">
<IcChipid="small-chip"label="Americano"size="small">
<SlottedSVG
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcChip>
</IcTooltip>

Programmatic trigger

Interactive example

Web component

React

<ic-buttonid="clickMe">Show tooltip</ic-button>
<ic-tooltip
id="targetTooltip"
label="Add Americano to favourites"
target="test-button"
>
<ic-buttonid="test-button"aria-describedby="ic-tooltip-test-button">
    Add
</ic-button>
</ic-tooltip>

<IcButtononClick={handleDisplay}>Show tooltip</IcButton>
<IcTooltip
ref={tooltipEl}
label="Add Americano to favourites"
target="test-button"
>
<IcButtonaria-describedby="ic-tooltip-test-button"id="test-button">
    Add
</IcButton>
</IcTooltip>

Last reviewed 31 May 2024 .

Component demo

Interactive example

Tooltip details

Props

CSS Custom Properties

Methods

Variants

Left placement

Interactive example

Right placement

Interactive example

Chip

Interactive example

Programmatic trigger

Interactive example