## Feature Examples
### `appendTo="viewport"`
- description: This is similar to the default placement.
- example:
```jsx
() => {
const [shown, setShown] = React.useState(false);
return (
Popover content:
Can be any react node!
);
};
```
### `appendTo="parent"`
- description: If you inspect the content, you'll see it is attached to a new div next to the target element (the Button).
- example:
```jsx
() => {
const [shown, setShown] = React.useState(true);
return (
Popover content:
Can be any react node!
);
};
```
### `appendTo="scrollParent"`
- description: If you inspect the content, you'll see it is attached to a new div under the list container.
- example:
```jsx
() => {
const [shown, setShown] = React.useState(true);
const ScrollableContent = ({ children }) => (
{children}
);
return (
Popover content:
Can be any react node!
);
};
```
### Interactive with appendTo="parent"
- description:
- example:
```jsx
() => {
const [shown, setShown] = React.useState(false);
return (
setShown(false)}
appendTo="parent"
>
Clicking inside the popover will not close it, but clicking
outside will.
);
};
```
### Non-Interactive with appendTo="window"
- description:
- example:
```jsx
() => {
const [shown, setShown] = React.useState(false);
return (
setShown(false)}
appendTo="window"
>
Clicking inside the popover will not close it, but clicking
outside will.
);
};
```
### Interactive with `appendTo="parent"`
- description:
- example:
```jsx
() => {
const [shown, setShown] = React.useState(false);
return (
setShown(true)}
onMouseLeave={() => setShown(false)}
appendTo="parent"
>
Now hover me!
);
};
```
### Non-Interactive with `appendTo="window"`
- description:
- example:
```jsx
() => {
const [shown, setShown] = React.useState(false);
return (
setShown(true)}
onMouseLeave={() => setShown(false)}
appendTo="window"
>
Now hover me!
);
};
```
### Flip enabled and `placement="right"`
- description:
- example:
```jsx
() => {
return (
I am a very long popover's content
);
};
```
### Flip disabled and `placement="right"`
- description:
- example:
```jsx
() => {
return (
I am a very long popover's content
);
};
```
### Fixed disabled (default) and `placement="top"`
- description:
- example:
```jsx
() => {
const ScrollableContent = ({ children }) => (