TooltipIcon

Source code

Usage

Default (“bottom” direction, “center” aligned)

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

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

Directions

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

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