<script>
  import { TooltipIcon } from "carbon-components-svelte";
  import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
  import Filter20 from "carbon-icons-svelte/lib/Filter20";
  import Preview from "../../components/Preview.svelte";
</script>

### Default ("bottom" direction, "center" aligned)

<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />

### Directions

<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />

### Custom tooltip text

Use the "text" slot to customize the tooltip text.

<TooltipIcon icon={Carbon24}>
  <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
</TooltipIcon>

### Disabled

<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />