# Popover A flexible and customizable UI element that displays additional content when triggered by user interaction. It is useful for providing contextual information, tooltips, or action menus without cluttering the interface. ## About 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. ## Example 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. ```html Popover - am amazing component for the displaying additional content. ``` ## Popover Title 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: ### Using the title Prop You can use the `title` prop to define the title of the **Popover**. Just pass the text of the title in the prop. It renders as plain text, so use the title snippet for markup. ```html Popover - am amazing component for the displaying additional content. ``` ### Using Snippet Alternatively, for custom title you can use the `title` snippet. ```html {#snippet title()} Popover Title {/snippet} ... ``` ## Position 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`. You can also 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. ```html Popover - am amazing component for the
displaying additional content. ``` ## Trigger Event 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**. ### Available Options - `click` (Default) - The popover appears when the user clicks the trigger element and closes when clicking outside. - `hover` - The popover appears when the user hovers over the trigger element and disappears when moving away. ```html Popover - am amazing component for the
displaying additional content. ``` ## Popover Gap The `gap` prop controls the spacing between the Popover and its trigger element. It accepts a number value, representing the offset in pixels. The default is `8`. ```html This popover has a larger gap from the trigger. ``` ## Close on Clicking 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. Set it to `false` to keep the popover open when clicking inside it. ```html Clicking inside this popover won't close it. ``` ## Animation Speed The `animationSpeed` 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. ```html This popover has a larger gap from the trigger. ``` ## Rounded Corners 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`, `2xl`, `full` and `none`. ```html This popover has a larger gap from the trigger. ``` ## Shadow 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`. ```html This popover has a larger gap from the trigger. ``` ## Customization The **Popover** component offers multiple ways to customize its appearance using the `titleClasses`, `bodyClasses`, and `class` attributes. These allow you to apply custom styles to the title, body and the container of the popover. - `titleClasses` prop lets you add custom styles to the **Popover title**, such as font size, color, or spacing. - `bodyClasses` prop allows you to style the **Popover body**, including padding, background, border, and typography. - `class` attribute allows you to styles the **Popover container**, modifying its overall look, size, or layout. ```html This popover has a styled title and body.

``` Anything else you pass reaches the element itself, so a `title`, a `data-*` attribute or an event handler all work the way they would on a `
`. The `id` is the exception: the component sets its own so the trigger can point at it with `aria-controls`. ## Accessibility The Popover handles focus, keyboard navigation, and the ARIA attributes that tie it to its trigger. - **Keyboard Navigation** Users can open and close the popover using the Space or Enter keys while the trigger element is focused when `triggerEvent="click"`. The trigger element is made focusable automatically. - Pressing Escape closes the popover when it is open when `triggerEvent="click"`. - The popovers triggered by hover are also accessible via focus for keyboard users. - **ARIA Attributes** The popover sets these ARIA attributes itself: The `aria-controls` links the trigger element to the popover container. - The `aria-haspopup` on the trigger element to indicate a popover is available. - The popover uses `role="dialog"` when `triggerEvent="click"` and `role="tooltip"` when `triggerEvent="hover"`. - **Focus Management** When opened, focus remains on the trigger element. - With `triggerEvent="click"`, the popover closes when clicking outside it or when keyboard focus moves away from both the trigger and the popover. - With `triggerEvent="hover"`, the popover opens when the trigger receives focus and closes when it loses focus. - The popover keeps its position next to the trigger while the page scrolls or resizes. ## Configuration ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `title` | string \| Snippet | `undefined` | Defines the title of the popover. Can be a string or a Snippet. A string renders as plain text; use a Snippet for markup. | | `trigger` | string | `undefined` | ID of the element that triggers the popover. It is a required prop. | | `position` | [Placement](https://www.theui.dev/docs/types#placement) | `top` | Specifies the position of the popover relative to the trigger. | | `triggerEvent` | "click" \| "hover" | `click` | Defines how the popover is triggered: by click or hover. | | `gap` | number | `8` | Sets the distance between the trigger and the popover. | | `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `normal` | Controls the animation speed of the popover. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `md` | Defines the border-radius of the popover. | | `shadow` | [SHADOW](https://www.theui.dev/docs/types#shadow-types) | `lg` | Controls the shadow intensity of the popover. | | `closeOnClick` | boolean | `true` | Determines whether the popover closes when clicking inside it. | | `titleClasses` | string | `` | Allows custom classes for styling the title. | | `bodyClasses` | string | `` | Allows custom classes for styling the popover body. | --- Category: Components Keywords: popover, tooltip, context-menu, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt