# Popover: Right to left

> The popup picks up the direction of the trigger that opened it, even though it renders in a portal. Logical sides like `inline-end` flip with it.

Example: https://hextaui.com/docs/popover/examples/rtl
Component docs: https://hextaui.com/docs/popover.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/popover-rtl.json
```

This adds `components/examples/popover/rtl.tsx` with the Popover component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/popover/rtl.tsx"
import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export function PopoverRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap justify-center gap-2">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          الأبعاد
        </PopoverTrigger>
        <PopoverContent align="start">
          <PopoverHeader>
            <PopoverTitle>الأبعاد</PopoverTitle>
            <PopoverDescription>اضبط أبعاد الطبقة.</PopoverDescription>
          </PopoverHeader>
          <div className="flex justify-end">
            <PopoverClose render={<Button size="sm" />}>تطبيق</PopoverClose>
          </div>
        </PopoverContent>
      </Popover>
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          inline-end
        </PopoverTrigger>
        <PopoverContent side="inline-end" className="w-48">
          <PopoverTitle>يفتح نحو النهاية</PopoverTitle>
        </PopoverContent>
      </Popover>
    </div>
  )
}
```

## Props in this example

### PopoverTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### PopoverContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"` | `"bottom"` |  |
| `align` | `"start" \| "center" \| "end"` | `"center"` |  |
| `className` | `string \| (state) => string` | – | The popup is w-72 by default. |

### PopoverClose

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Popover examples

- [Content that changes size](https://hextaui.com/docs/popover/examples/resizing.md)
- [Controlled](https://hextaui.com/docs/popover/examples/controlled.md)
- [Placement](https://hextaui.com/docs/popover/examples/placement.md)
- [Open on hover](https://hextaui.com/docs/popover/examples/hover.md)
- [Detached triggers](https://hextaui.com/docs/popover/examples/detached.md)
- [With a calendar](https://hextaui.com/docs/popover/examples/calendar.md)
- [Nested](https://hextaui.com/docs/popover/examples/nested.md)
- [Long content](https://hextaui.com/docs/popover/examples/long-content.md)
- [Modal](https://hextaui.com/docs/popover/examples/modal.md)
- [Disabled](https://hextaui.com/docs/popover/examples/disabled.md)