@sveltestrap/sveltestrap/src/Tooltip/Tooltip.mdx

Bootstrap components for Svelte

import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as TooltipStories from './Tooltip.stories';

<Meta title="Components/Tooltip" />

# Tooltip <small class="bootstrap-docs">[Bootstrap Tooltip](https://getbootstrap.com/docs/5.3/components/tooltips/)</small>

The `<Tooltip>` component is a user interface element that provides supplementary information when users hover over or interact with an element.

<Canvas>
  <Story of={TooltipStories.Basic} />
</Canvas>

<Controls of={TooltipStories.Basic} />

## HTML Content

<Canvas withSource="none">
  <Story of={TooltipStories.HTML} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Button, Tooltip } from '@sveltestrap/sveltestrap';
</script>

<div>
  <Button id="btn-right-html">HTML right</Button>
  <Tooltip target="btn-right-html" placement="right">
    <strong>Hello</strong> <i>World</i>!
  </Tooltip>
</div>
`} />

## Controlled

<Canvas withSource="none">
  <Story of={TooltipStories.Controlled} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Button, Tooltip } from '@sveltestrap/sveltestrap';
  let isOpen = false;
</script>

<div class="mt-3">
  <Button id="controlledBtn">You could hover here</Button>
  <Tooltip bind:isOpen placement="right" target="controlledBtn" delay="500">
    This is a Tooltip controlled externally.
  </Tooltip>
  <hr />
  <label>
    <input type="checkbox" bind:checked={isOpen} />
    Or you can check this to control the Tooltip state.
  </label>
</div>
`} />

## Element Target

<Canvas withSource="none">
  <Story of={TooltipStories.ElementTarget} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Button } from '@sveltestrap/sveltestrap';
  let myHtmlElementA, myHtmlElementB;
</script>

<div class="mt-3">
  <div style="background: lightgreen" bind:this={myHtmlElementA}>
    A
  </div>
  <Tooltip target={myHtmlElementA} placement="right">
    A
  </Tooltip>
</div>

<div class="mt-3">
  <div style="background: lightblue" bind:this={myHtmlElementB}>
    B
  </div>
  <Tooltip target={myHtmlElementB} placement="right">
    B
  </Tooltip>
</div>
`} />

## Theming

<Canvas withSource="none">
  <Story of={TooltipStories.Theming} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Button } from '@sveltestrap/sveltestrap';
</script>

<Button id="btn-dark-theme" color="dark">Dark Theme</Button>
<Button id="btn-light-theme" color="light" class="ml-2">Light Theme</Button>

<Tooltip theme="dark" target="btn-dark-theme" placement="right">
  This a <strong>dark theme</strong> tooltip!
</Tooltip>

<Tooltip theme="light" target="btn-light-theme" placement="right">
  This a <strong>light theme</strong> tooltip!
</Tooltip>
`} />