<script>
  import { TooltipDefinition } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`TooltipDefinition` provides inline definitions for terms or concepts. It displays a tooltip when users hover over or focus on the defined term, making it ideal for providing additional context without cluttering the interface.

## Default

Display a basic definition tooltip with the default bottom-center alignment.

<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
  Armonk
</TooltipDefinition>

## Custom tooltip direction and alignment

Customize the tooltip position using the `direction` and `align` props. The default direction is `"bottom"` and alignment is `"center"`.

<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
  Armonk
</TooltipDefinition>

## Custom tooltip slot

Use the `tooltip` slot to customize the tooltip content with additional styling or structure.

<TooltipDefinition>
  Armonk
  <span slot="tooltip" style="color: red">
    IBM Corporate Headquarters is based in Armonk, New York.
  </span>
</TooltipDefinition>
