@wix/design-system/dist/docs/components/PopoverExamples.md

@wix/design-system

## Feature Examples


### `appendTo="viewport"`
- description: <p>This is similar to \</p>
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Box
      width="250px"
      overflow="hidden"
      border="solid 1px black"
      padding="50px"
    >
      <Popover showArrow shown={shown} appendTo="viewport"
          placement="bottom">
        <Popover.Element>
          <Button onClick={() => setShown((prev) => !prev)}>Click me to toggle</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" direction="vertical" maxWidth="200px">
            <Heading size="small">Popover content:</Heading>
            <Text size="small" skin="standard" weight="thin">
              Can be any react node!
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### `appendTo=&#34;parent&#34;`
- description: <p>If you inspect the content, you'll see it is attached to a new div next to the target element (the Button).</p>
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(true);

  return (
    <Box
      width="250px"
      overflow="hidden"
      border="solid 1px black"
      padding="50px"
    >
      <Popover showArrow shown={shown} appendTo="parent"
          placement="right">
        <Popover.Element>
          <Button onClick={() => setShown((prev) => !prev)}>Click me to toggle</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" direction="vertical" maxWidth="200px">
            <Heading size="small">Popover content:</Heading>
            <Text size="small" skin="standard" weight="thin">
              Can be any react node!
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### `appendTo=&#34;scrollParent&#34;`
- description: <p>If you inspect the content, you'll see it is attached to a new div under the list container.</p>
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(true);

  const ScrollableContent = ({ children }) => (
    <div style={{ overflow: 'hidden', position: 'relative', border: '1px solid black' }}>
      <div style={{ overflow: 'auto', height: 120 }}>
        <div style={{ padding: '25px 25px 150px' }}>{children}</div>
      </div>
    </div>
  );

  return (
    <ScrollableContent>
      <Box width="250px" overflow="hidden" border="solid 1px black" padding="50px">
        <Popover showArrow shown={shown} appendTo="scrollParent" placement="right">
          <Popover.Element>
            <Button onClick={() => setShown((prev) => !prev)}>Click me to toggle</Button>
          </Popover.Element>
          <Popover.Content>
            <Box padding="12px 24px" direction="vertical" maxWidth="200px">
              <Heading size="small">Popover content:</Heading>
              <Text size="small" skin="standard" weight="thin">
                Can be any react node!
              </Text>
            </Box>
          </Popover.Content>
        </Popover>
      </Box>
    </ScrollableContent>
  );
};
```

### Interactive with appendTo=&#34;parent&#34;
- description: 
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Box align="center" verticalAlign="middle">
      <Popover
        showArrow
        animate
        placement="right"
        shown={shown}
        onClickOutside={() => setShown(false)}
        appendTo="parent"
      >
        <Popover.Element>
          <Button onClick={() => setShown((prev) => !prev)}>Click me to toggle</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" width={140}>
            <Text size="small" skin="standard" weight="thin">
              Clicking inside the popover will not close it, but clicking outside will.
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### Non-Interactive with appendTo=&#34;window&#34;
- description: 
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Box align="center" verticalAlign="middle">
      <Popover
        showArrow
        animate
        placement="right"
        shown={shown}
        onClickOutside={() => setShown(false)}
        appendTo="window"
      >
        <Popover.Element>
          <Button onClick={() => setShown((prev) => !prev)}>Click me to toggle</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" width={140}>
            <Text size="small" skin="standard" weight="thin">
              Clicking inside the popover will not close it, but clicking outside will.
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### Interactive with `appendTo=&#34;parent&#34;`
- description: 
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Box align="center" verticalAlign="middle">
      <Popover
        showArrow
        animate
        placement="right"
        shown={shown}
        onMouseEnter={() => setShown(true)}
        onMouseLeave={() => setShown(false)}
        appendTo="parent"
      >
        <Popover.Element>
          <Button>Hover me to open</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" width={100}>
            <Text size="small" skin="standard" weight="thin">
              Now hover me!
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### Non-Interactive with `appendTo=&#34;window&#34;`
- description: 
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Box align="center" verticalAlign="middle">
      <Popover
        showArrow
        animate
        placement="right"
        shown={shown}
        onMouseEnter={() => setShown(true)}
        onMouseLeave={() => setShown(false)}
        appendTo="window"
      >
        <Popover.Element>
          <Button>Hover me to open</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" width={100}>
            <Text size="small" skin="standard" weight="thin">
              Now hover me!
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### Flip enabled and `placement=&#34;right&#34;`
- description: 
- example: 
```jsx 
() => {
  return (
    <Box align="center" verticalAlign="middle" height={80} style={{ overflow: 'auto' }}>
      <Popover shown showArrow placement="right" appendTo="scrollParent" flip>
        <Popover.Element>
          <Button>I am a plain Button</Button>
        </Popover.Element>
        <Popover.Content>
          <Box align="center" verticalAlign="middle" width={300} height={40}>
            <Text size="small" skin="standard" weight="thin">
              I am a very long popover's content
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### Flip disabled and `placement=&#34;right&#34;`
- description: 
- example: 
```jsx 
() => {
  return (
    <Box align="center" verticalAlign="middle" height={80} style={{ overflow: 'auto' }}>
      <Popover shown showArrow placement="right" appendTo="scrollParent" flip={false}>
        <Popover.Element>
          <Button>I am a plain Button</Button>
        </Popover.Element>
        <Popover.Content>
          <Box align="center" verticalAlign="middle" width={300} height={40}>
            <Text size="small" skin="standard" weight="thin">
              I am a very long popover's content
            </Text>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};
```

### Fixed disabled (default) and `placement=&#34;top&#34;`
- description: 
- example: 
```jsx 
() => {
  const ScrollableContent = ({ children }) => (
    <div style={{ overflow: 'hidden', position: 'relative', border: '1px solid black' }}>
      <div style={{ overflow: 'auto', height: 120, display: 'flex', justifyContent: 'center' }}>
        <div style={{ padding: '70px 25px 100px' }}>{children}</div>
      </div>
    </div>
  );

  return (
    <ScrollableContent>
      <Popover
        shown
        showArrow
        placement="top"
        appendTo="scrollParent"
        fixed={false}
      >
        <Popover.Element>
          <Button>I am a plain Button</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" width={140}>
            <Text size="small" skin="standard" weight="thin">Content</Text>
          </Box>
        </Popover.Content>
      </Popover>
    </ScrollableContent>
  );
};
```

### Fixed enabled and `placement=&#34;top&#34;`
- description: 
- example: 
```jsx 
() => {
  const ScrollableContent = ({ children }) => (
    <div style={{ overflow: 'hidden', position: 'relative', border: '1px solid black' }}>
      <div style={{ overflow: 'auto', height: 120, display: 'flex', justifyContent: 'center' }}>
        <div style={{ padding: '70px 25px 100px' }}>{children}</div>
      </div>
    </div>
  );

  return (
    <ScrollableContent>
      <Popover
        shown
        showArrow
        placement="top"
        appendTo="scrollParent"
        fixed
      >
        <Popover.Element>
          <Button>I am a plain Button</Button>
        </Popover.Element>
        <Popover.Content>
          <Box padding="12px 24px" width={140}>
            <Text size="small" skin="standard" weight="thin">Content</Text>
          </Box>
        </Popover.Content>
      </Popover>
    </ScrollableContent>
  );
};
```