Tooltip
Tooltip
Component demo
Interactive example
<ic-tooltiptarget="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-tooltiptarget="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><IcTooltiptarget="test-button-0"label="Add Americano to favourites"placement="top"><IcButtonid="test-button-0"aria-describedby="ic-tooltip-test-button-0"> Add</IcButton></IcTooltip><IcTooltiptarget="test-button-1"label="Remove Americano from favourites"placement="bottom"><IcButtonid="test-button-1"aria-describedby="ic-tooltip-test-button-1"> Remove</IcButton></IcTooltip>Tooltip details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
|
|---|---|---|
|
|
The text to display on the tooltip. |
|
|
|
If |
|
|
|
The number of lines to display before truncating the text. |
|
|
|
The position of the tooltip in relation to the parent element. |
|
|
|
The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used. |
|
|
The text to display on the tooltip. |
|
If |
|
The number of lines to display before truncating the text. |
|
The position of the tooltip in relation to the parent element. |
|
The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used. |
CSS Custom Properties
|
|
|
|---|---|
|
|
|
|
|
Methods
|
|
|
|
|---|---|---|
|
|
|
|
|
|
Variants
Left placement
Interactive example
<ic-tooltiptarget="test-button"label="Add Americano to favourites"placement="left"><ic-buttonid="test-button"aria-describedby="ic-tooltip-test-button"> Add</ic-button></ic-tooltip><IcTooltiptarget="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
<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><IcTooltiptarget="test-button"label="Add Americano to favourites"placement="right"><IcButtonid="test-button"aria-describedby="ic-tooltip-test-button"> Add</IcButton></IcTooltip>Chip
Interactive example
<ic-tooltiptarget="small-chip"label="An espresso-based drink"><ic-chipid="small-chip"label="Americano"size="small"><svgslot="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"/></svg></ic-chip></ic-tooltip><IcTooltiptarget="small-chip"label="An espresso-based drink"><IcChipid="small-chip"label="Americano"size="small"><SlottedSVGslot="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
<ic-buttonid="clickMe">Show tooltip</ic-button><ic-tooltipid="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><IcTooltipref={tooltipEl}label="Add Americano to favourites"target="test-button"><IcButtonaria-describedby="ic-tooltip-test-button"id="test-button"> Add</IcButton></IcTooltip>