,
Notifications
You are all caught up. Good job!
,
];
}
```
### Animating the Popover
You can animate a popover as it moves between different trigger elements.
This includes animating its position, size, and content.
#### Position and Size
To animate the popover's position, apply CSS transitions to the `left`, `right`, `top`, and `bottom` properties of the **Positioner** part.
To animate its size, transition the `width` and `height` of the **Popup** part.
#### Content
The popover also supports content transitions.
This is useful when different triggers display different content within the same popover.
To enable content animations, wrap the content in the `` part.
This part provides features to create direction-aware animations.
It renders a `div` with a `data-activation-direction` attribute that indicates the new trigger's position relative to the previous one. The value is a space-separated set of up to two tokens (one per axis) — `left` or `right` for the horizontal axis and `up` or `down` for the vertical axis (for example, `right down`). Match a single token with the `~=` attribute selector, such as `[data-activation-direction~='right']`.
Inside the ``, the content is further wrapped in `div`s with data attributes to help with styling:
- `data-current`: The currently visible content when no transitions are present or the incoming content.
- `data-previous`: The outgoing content during a transition.
You can use these attributes to style the enter and exit animations.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import { Dynamic } from '@solidjs/web';
import type { Component } from 'solid-js';
import { Popover } from 'base-ui-solid/popover';
import { Avatar } from 'base-ui-solid/avatar';
const demoPopover = Popover.createHandle();
const triggerClassName =
'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
export default function PopoverDetachedTriggersFullDemo() {
return (