# Popover ```mdx
``` ## Usage > **Template macros available** > This component ships a `popover()` macro for Jinja and Nunjucks. > [More](/templates#popover) Basecoat popovers are inline-positioned relative to the `.popover` wrapper. This differs from shadcn/ui's portalled Base UI implementation, but keeps the markup dependency-free and works with Basecoat's existing dropdown/select positioning model. Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Popover component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/popover.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). Copy or serve the full Basecoat JavaScript bundle. ```html ``` Or copy or serve the Basecoat runtime and Popover script. ```html ``` Using CDN or bundler imports? See the [Installation page](/installation). ```html
``` ### HTML structure
<div class="popover">
Relative wrapper for the trigger and inline popover content.
<button type="button" aria-expanded="false" aria-controls="{ POPOVER_ID }">
Trigger button. The script toggles aria-expanded and opens or closes the content.
<div data-popover id="{ POPOVER_ID }" aria-hidden="true">
Popover content. Supports data-side="top|right|bottom|left|inline-start|inline-end" and data-align="start|center|end".
## Examples ### Basic ```mdx
``` ### Align ```mdx
``` ### Sides ```mdx
``` ### With form ```mdx
``` ### RTL Popover alignment uses logical start and end offsets. Set `dir="rtl"` on a parent to flip start/end alignment. ```mdx
```