Popover

A dynamic and flexible popover component used for dropdowns, tooltips, and contextual menus.

Props

Prop	Type	Default	Description
`trigger`	`Snippet`	`required`	Snippet for the element that triggers the popover.
`content`	`Snippet`	`required`	Snippet for the content displayed inside the popover.
`isOpen`	`boolean`	`false`	Controls the visibility of the popover. Supports $bindable.
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	The preferred position of the popover relative to the trigger.
`variant`	`string`	`''`	Custom variant class for theming.
`componentId`	`string`	`crypto.randomUUID()`	The unique identifier for the component wrapper.
`transitionFn`	`function`	`fade`	Svelte transition function for the popover content.
`transitionParams`	`object`	`{ duration: 150 }`	Parameters for the transition function.

A flexible popover component for tooltips, dropdowns, and more.

Standard popover that toggles on click.

<script>

  import { Popover } from 'fluid-ui-svelte/components';

  import { Text } from 'fluid-ui-svelte/base';

</script>

<Popover>

  {#snippet trigger()}

    <Text class="bg-primary-500 text-white p-2 rounded-md">Click Me</Text>

  {/snippet}

  {#snippet content()}

    <Text>This is a popover content!</Text>

  {/snippet}

</Popover>

Popovers can be positioned in four different directions.

<script>

  import { Popover } from 'fluid-ui-svelte/components';

  import { Text } from 'fluid-ui-svelte/base';

</script>

<Popover position="top">

  {#snippet trigger()}

    <Text class="border border-primary-500 text-primary-500 p-2 rounded-md">Top Popover</Text>

  {/snippet}

  {#snippet content()}

    <Text>Content on top</Text>

  {/snippet}

</Popover>

<Popover position="right">

  {#snippet trigger()}

    <Text class="border border-primary-500 text-primary-500 p-2 rounded-md">Right Popover</Text>

  {/snippet}

  {#snippet content()}

    <Text>Content on right</Text>

  {/snippet}

</Popover>