# Popover

Floating content anchored to a trigger, plus hover cards.

Group: Overlays & Feedback

## Import

```tsx
import { Popover } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
<HStack gap="4">
  <Popover.Root>
    <Popover.Trigger asChild>
      <Button variant="outline" size="sm">Open popover</Button>
    </Popover.Trigger>
    <Portal>
      <Popover.Positioner>
        <Popover.Content>
          <Popover.Arrow />
          <Popover.Body>
            <Text fontSize="sm" fontWeight="medium" mb="1">Dimensions</Text>
            <Text fontSize="sm" color="fg.muted">Atur ukuran layer di sini.</Text>
          </Popover.Body>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>

  <HoverCard.Root>
    <HoverCard.Trigger asChild>
      <Text as="span" fontSize="sm" textDecoration="underline" cursor="default">
        @indoku
      </Text>
    </HoverCard.Trigger>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <Text fontSize="sm" fontWeight="medium">IndokuUI</Text>
          <Text fontSize="sm" color="fg.muted">Library UI ala shadcn/ui.</Text>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
</HStack>
```