# Tooltip: Right to left

> Inside `dir="rtl"`, `inline-end` opens on the left and the shortcut moves to the other end.

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

## Add this example

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

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

## Source

```tsx title="components/examples/tooltip/rtl.tsx"
import { IconBookmark, IconHeart, IconShare2 } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const actions = [
  { label: "أعجبني", icon: IconHeart },
  { label: "حفظ", icon: IconBookmark, keys: "mod+d" },
  { label: "مشاركة", icon: IconShare2 },
]

export function TooltipRtl() {
  return (
    <div dir="rtl">
      <TooltipProvider>
        <div className="flex items-center gap-1">
          {actions.map(({ label, icon: Icon, keys }) => (
            <Tooltip key={label}>
              <TooltipTrigger
                render={
                  <Button variant="ghost" size="icon" aria-label={label} />
                }
              >
                <Icon />
              </TooltipTrigger>
              <TooltipContent side="inline-end" arrow>
                {label}
                {keys && <Kbd keys={keys} size="sm" />}
              </TooltipContent>
            </Tooltip>
          ))}
        </div>
      </TooltipProvider>
    </div>
  )
}
```

## Props in this example

### TooltipTrigger

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

### TooltipContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"` | `"top"` |  |
| `arrow` | `boolean` | `false` |  |

## More Tooltip examples

- [Sides](https://hextaui.com/docs/tooltip/examples/sides.md)
- [With an arrow](https://hextaui.com/docs/tooltip/examples/arrow.md)
- [Keyboard shortcut](https://hextaui.com/docs/tooltip/examples/shortcut.md)
- [Toolbar](https://hextaui.com/docs/tooltip/examples/toolbar.md)
- [Disabled](https://hextaui.com/docs/tooltip/examples/disabled.md)
- [Long content](https://hextaui.com/docs/tooltip/examples/long-content.md)
- [Controlled](https://hextaui.com/docs/tooltip/examples/controlled.md)
- [One tooltip, many triggers](https://hextaui.com/docs/tooltip/examples/detached.md)