Popover

Overlay & Menus

Popover

Positioned overlay anchored to a trigger with collision detection.

Usage

Wrap any floating panel such as tooltips, emoji pickers, or menus.

Highlights

• Portal + ScrollAware repositioning
• Arrow and offset configuration

When to use it

• Content must stay attached to a control.
• You need custom overlay surfaces beyond Menu.

Related components

TooltipDropdownListPopoverPortal

Examples

Default

Preview (Web)

import { useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from 'react-native-molecules/components/Button';
import { Popover } from 'react-native-molecules/components/Popover';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  container: {
      padding: 48,
      alignItems: 'center',
      justifyContent: 'center',
      height: 260,
  },
  content: {
      padding: 16,
  },
});

export default function Example() {
  const triggerRef = useRef(null);
  const [open, setOpen] = useState(false);

  return (
      <View style={styles.container}>
          <Button ref={triggerRef} onPress={() => setOpen(o => !o)}>
              Show Popover
          </Button>
          <Popover triggerRef={triggerRef} isOpen={open} onClose={() => setOpen(false)}>
              <View style={styles.content}>
                  <Text>I'm a popover</Text>
              </View>
          </Popover>
      </View>
  );
}