Popover

The Popover component allows developers to display a small floating panel next to a specified trigger element. It supports various customization options, including positioning, animation speed, rounded corners, shadow effects, and trigger events (click or hover). The popover can contain a title and body content, both of which can be styled individually using provided class props.

By default, the popover appears above (top) the trigger element with a configurable gap. It can be dismissed automatically when clicking outside or manually by interacting with the trigger. The component is designed to be lightweight, accessible, and easy to integrate with different UI designs.

The Popover component can be easily added to your project by wrapping the content you want to display inside it. The trigger prop connects the Popover component to a specific element by matching its id. When the user interacts with this element, the popover appears next to it. This ensures precise control over where and when the popover is displayed.

<script>
  import { Popover } from "theui-svelte";
</script>

<Popover trigger="my-popover"> 
  Popover - am amazing component for the displaying additional content.
</Popover>

<Button id="my-popover">Test popover</Button>

The Popover component allows adding a title to provide a heading or short description before the main content. You can add a title in two ways:

<Popover trigger="my-popover" title="Popover Title">
  Popover - am amazing component for the displaying additional content.
</Popover>

<Popover trigger="my-popover">
  {#snippet title()}
    Popover <span class="text-brand-primary-500">Title</span>
  {/snippet}
  ...
</Popover>

The Popover component allows you to control where it appears relative to the trigger element using the position prop. By default, the popover appears at the top of the trigger, but you can set it to different positions like top, bottom, left, or right. Additionally, you can use more specific placements such as top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, and right-end to fine-tune alignment.

<Popover trigger="my-popover" position="right">
  Popover - am amazing component for the<br>displaying additional content.
</Popover>

The Popover component supports different interaction types through the triggerEvent prop, allowing you to control how the popover is activated. By default, the popover opens when the trigger element is clicked, but you can also set it to open on hover.

<Popover trigger="my-popover5" triggerEvent="hover">
  Popover - am amazing component for the<br>displaying additional content.
</Popover>

The gap prop controls the spacing between the Popover and its trigger element. It accepts a number value, representing the offset in pixels. By default, the gap is set to 8, ensuring a small but noticeable space between the popover and the trigger.

<Popover trigger="my-popover" gap={16}>
  This popover has a larger gap from the trigger.
</Popover>

The closeOnClick prop determines whether the Popover should close when clicking inside it. By default, this is set to true, meaning the popover will close when the user interacts with its content.

<Popover trigger="my-popover7" closeOnClick={true}>
  Clicking inside this popover won't close it.
</Popover>

The animate prop controls the speed of the animation when the Popover appears or disappears. It accepts the following values none, slower, slow, normal, fast and faster - which can be used to define how quickly the popover fades in and out.

<Popover trigger="my-popover" animate="slower">
  This popover has a larger gap from the trigger.
</Popover>

The rounded prop controls the corner rounding of the Popover. You can adjust it using predefined values to give the popover a smooth, rounded appearance. Available values are sm, md, lg, xl, full and none.

<Popover trigger="my-popover" rounded="none">
  This popover has a larger gap from the trigger.
</Popover>

The shadow prop adds a shadow effect to the Popover, helping it stand out against the background. Available values are xs, sm, md, lg, xl, 2xl, inner, none.

<Popover trigger="my-popover" shadow="xl">
  This popover has a larger gap from the trigger.
</Popover>