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-icon): improve docs

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

12
docs/src/pages/components/TooltipIcon.svx
View file

@ -5,12 +5,18 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
## Default ("bottom" direction, "center" aligned) `TooltipIcon` displays contextual information when users hover over or focus on an icon. It's ideal for providing additional context about icons or actions in your interface.
## Default
Display a tooltip with the default bottom-center alignment.
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} /> <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
## Directions ## Directions
Position the tooltip in different directions and alignments using the `direction` and `align` props.
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} /> <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} /> <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} /> <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
@ -18,7 +24,7 @@
## Custom tooltip text ## Custom tooltip text
Use the "text" slot to customize the tooltip text. Use the `tooltipText` slot to customize the tooltip content with additional styling.
<TooltipIcon icon={Carbon}> <TooltipIcon icon={Carbon}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span> <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
@ -26,4 +32,6 @@ Use the "text" slot to customize the tooltip text.
## Disabled state ## Disabled state
Set `disabled` to `true` to prevent user interaction with the tooltip.
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} /> <TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />