mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(tooltip): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:06:20 -07:00
commit 022836872c
1 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
docs/src/pages/components/Tooltip.svx
View file

@ -8,9 +8,11 @@ components: ["Tooltip", "TooltipFooter"]
import Preview from "../../components/Preview.svelte";
</script>
`Tooltip` displays contextual information when users hover over or focus on an element. It supports various directions, alignments, and interactive content to provide additional context or guidance.
## Default
By default, the tooltip is triggered by an information icon.
Display a tooltip triggered by the default information icon.
<Tooltip>
<p>
@ -20,6 +22,8 @@ By default, the tooltip is triggered by an information icon.
## With trigger text
Use custom trigger text instead of the default icon.
<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
@ -28,10 +32,14 @@ By default, the tooltip is triggered by an information icon.
## Reactive example
Control the tooltip state programmatically.
<FileSource src="/framed/Tooltip/TooltipReactive" />
## Directions
Position the tooltip in different directions using the `direction` prop.
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
@ -39,12 +47,16 @@ By default, the tooltip is triggered by an information icon.
## Alignment
Align the tooltip content using the `align` prop.
<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
## Interactive
Add interactive elements like links and buttons using `TooltipFooter`.
<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
@ -52,11 +64,13 @@ By default, the tooltip is triggered by an information icon.
<TooltipFooter selectorPrimaryFocus="#d">
<Link href="/">Learn more</Link>
<Button id="d" size="small">Manage</Button>
</TooltipFooter>
</TooltipFooter>
</Tooltip>
## Custom icon (component)
Use a custom icon component with the `icon` prop.
<Tooltip triggerText="Resource list" icon={Catalog}>
<p>
Resources are provisioned based on your account's organization.
@ -65,6 +79,8 @@ By default, the tooltip is triggered by an information icon.
## Custom icon (slot)
Customize the icon using the `icon` slot for more flexibility.
<Tooltip triggerText="Resource list">
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
<p>
@ -74,6 +90,8 @@ By default, the tooltip is triggered by an information icon.
## Hidden icon
Hide the icon while keeping the tooltip functionality using `hideIcon`.
<Tooltip hideIcon triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.