Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Tooltip

Guidance Code Accessibility

Component demo

Interactive example

Add Remove
Web component React
StackBlitz
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>

Tooltip details

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

Iftrue , 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

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

type: boolean - boolean | undefined
false
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 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
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"

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

Add
Web component React
StackBlitz
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>

Right placement

Interactive example

Add
Web component React
StackBlitz
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>

Chip

Interactive example

Web component React
StackBlitz
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>

Programmatic trigger

Interactive example

Show tooltip Add
Web component React
StackBlitz
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>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Tooltip - Intelligence Community Design System