@sveltestrap/sveltestrap/src/Popover/Popover.mdx

Bootstrap components for Svelte

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

<Meta title="Components/Popovers" />

# Popovers <small class="bootstrap-docs">[Bootstrap Popovers](https://getbootstrap.com/docs/4.0/components/popovers/)</small>

The `<Popover>` component is designed to enhance user interaction by providing context-specific information or actions without disrupting the overall user experience.

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

<div id="popover-controls">
  <Controls of={PopoverStories.Basic} />
</div>

## Placement

<Canvas withSource="none">
  <Story of={PopoverStories.Placement} />
</Canvas>

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

  const placements: string[] = ['top', 'right', 'left', 'bottom', 'auto'];
  const colors: string[] = ['primary', 'success', 'danger', 'warning'];
</script>

{#each placements as placement, index}
  <Button color={colors[index]} id="btn-{placement}">Show on {placement}</Button>

  <Popover
    target="btn-{placement}"
    {placement}
    title="Popover {placement}"
  >
    This Popover is using <b>{args.placement}</b> placement.
  </Popover>
{/each}
`} />

## Triggers

<Canvas withSource="none">
  <Story of={PopoverStories.Triggers} />
</Canvas>

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

<div>
  <Button color="primary" id="btn-trigger-click">Click me</Button>
  <Popover
    trigger="click"
    placement="top"
    target="btn-trigger-click"
    title="Popover on click"
  >
    This Popover is shown when clicking on the trigger element.
  </Popover>
</div>

<div>
  <Button color="warning" id="btn-trigger-hover">Hover me</Button>
  <Popover
    trigger="hover"
    placement="right"
    target="btn-trigger-hover"
    title="Popover with hover"
  >
    This Popover is shown while hovering over the trigger element.
  </Popover>
</div>

<div>
  <Button color="danger" id="btn-trigger-focus">Focus me</Button>
  <Popover
    trigger="focus"
    placement="bottom"
    target="btn-trigger-focus"
    title="Popover with focus"
  >
    This Popover is shown while focusing on the trigger element.
  </Popover>
</div>
`} />

## Dismissible

<Canvas withSource="none">
  <Story of={PopoverStories.Dismissible} />
</Canvas>

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

<Button color="primary" id="btn-dismissible">Click me</Button>

<Popover placement="right" target="btn-dismissible" dismissible>
  <div slot="title">
    <i>Hello</i> <b>World!</b>
  </div>
  This Popover is dismissesed when any click occurs.
</Popover>
`} />

## Outside Click

<Canvas withSource="none">
  <Story of={PopoverStories.OutsideClick} />
</Canvas>

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

<Button color="primary" id="btn-outside-click">Click me</Button>

<Popover placement="right" target="btn-outside-click" hideOnOutsideClick>
  <div slot="title">
    <i>Hello</i> <b>World!</b>
  </div>
  You can click inside this Popover and it will not dismiss. Dismissal will only occur if the click is outside of the popover.
</Popover>
`} />

## Theming

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

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

<Button color="dark" id="btn-dark-theme">Show dark theme</Button>
<Button color="light" id="btn-light-theme">Show light theme</Button>

<Popover theme="light" placement="right" target="btn-light-theme" hideOnOutsideClick>
  <div slot="title">
    <i>Hello</i> <b>World!</b>
  </div>
  You can click inside this Popover and it will not dismiss. Dismissal will only occur if the click is outside of the popover.
</Popover>

<Popover theme="dark" placement="right" target="btn-dark-theme" hideOnOutsideClick>
  <div slot="title">
    <i>Hello</i> <b>World!</b>
  </div>
  You can click inside this Popover and it will not dismiss. Dismissal will only occur if the click is outside of the popover.
</Popover>
`} />