Tooltip

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<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 disableClick Attribute disable-click	If`true` , the tooltip will not be displayed on click, it will require hover or using the display method. type: boolean - boolean \| undefined	false
Property disableHover Attribute disable-hover	If`true` , the tooltip will not be displayed on hover, it will require a click. type: boolean - boolean \| undefined	false
Property fixedPositioning Attribute fixed-positioning	Setting to`true` can help in situations where tooltip content is clipped by a parent element. type: boolean	false
Property iconAltText Attribute icon-alt-text	The alt text to be used alongside a slotted icon. type: string - string \| undefined
Property maxLines Attribute max-lines	The number of lines to display before truncating the text. type: number - number \| undefined
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" \| undefined	"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 - string \| undefined
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" \| undefined	"inherit"

Property

label

Attribute

label

The text to display on the tooltip.

Required

type: string

Property

disableClick

Attribute

disable-click

Iftrue , the tooltip will not be displayed on click, it will require hover or using the display method.

type: boolean - boolean | undefined

Default: false

Property

disableHover

Attribute

disable-hover

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

type: boolean - boolean | undefined

Default: false

Property

fixedPositioning

Attribute

fixed-positioning

Setting totrue can help in situations where tooltip content is clipped by a parent element.

type: boolean

Default: false

Property

iconAltText

Attribute

icon-alt-text

The alt text to be used alongside a slotted icon.

type: string - string | undefined

Property

maxLines

Attribute

max-lines

The number of lines to display before truncating the text.

type: number - number | undefined

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 - string | undefined

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" | undefined

Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot icon	Icon will be rendered to the left of the tooltip text.

CSS Custom Properties

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

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

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icTooltipShow React onIcTooltipShow	Emitted when the tooltip becomes visible.	void

Web component

icTooltipShow

React

onIcTooltipShow

Emitted when the tooltip becomes visible.

void

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

Show full code

<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

Show full code

<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

Show full code

<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

Show tooltip

Web component

React

Show full code

<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

Slots

CSS Custom Properties

Events

Methods

Variants

Left placement

Interactive example

Right placement

Interactive example

Chip

Interactive example

Programmatic trigger

Interactive example