# Popover Props (свойства) для компонента Popover: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"trigger","type":{"name":"enum","raw":"PopoverTrigger","value":[{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"placement","type":{"name":"Placement | ComputedPlacement[]"}},{"name":"offset","type":{"name":"[number, number]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"target","type":{"name":"ReactNode | RefObject<HTMLElement>"}},{"name":"hasArrow","type":{"name":"boolean"}},{"name":"zIndex","type":{"name":"string"}},{"name":"preventOverflow","type":{"name":"boolean"}},{"name":"isFocusTrapped","type":{"name":"boolean"}},{"name":"onToggle","type":{"name":"((isOpen: boolean, event: Event | SyntheticEvent<Element, Event>) => void)"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"usePortal","type":{"name":"boolean"}},{"name":"animated","type":{"name":"boolean"}}] :::info
`target`  может быть как ReactNode, так и RefObject:
:::
```tsx
import React from 'react';
import styled from "styled-components";
import { surfaceSolid03 } from "@salutejs/plasma-tokens-web";
import { Popover, Button } from '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
const StyledContent = styled.div`
background: ${surfaceSolid03};
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
`;
return (
<section style={{width: '20rem', height: '15rem'}}>
<Popover
opened={isOpen}
onToggle={(is) => setIsOpen(is)}
role="presentation"
id="popover"
target={<Button>Target</Button>}
offset={[0, 6]}
placement='bottom'
trigger='click'
hasArrow
closeOnOverlayClick
closeOnEsc
isFocusTrapped
>
<StyledContent>
<>Content</>
<Button onClick={() => setIsOpen(false)}>close</Button>
</StyledContent>
</Popover>
</section>
);
}
```
# Popover Props (свойства) для компонента Popover: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"trigger","type":{"name":"enum","raw":"PopoverTrigger","value":[{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"placement","type":{"name":"Placement | ComputedPlacement[]"}},{"name":"offset","type":{"name":"[number, number]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"target","type":{"name":"ReactNode | RefObject<HTMLElement>"}},{"name":"hasArrow","type":{"name":"boolean"}},{"name":"zIndex","type":{"name":"string"}},{"name":"preventOverflow","type":{"name":"boolean"}},{"name":"isFocusTrapped","type":{"name":"boolean"}},{"name":"onToggle","type":{"name":"((isOpen: boolean, event: Event | SyntheticEvent<Element, Event>) => void)"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"usePortal","type":{"name":"boolean"}},{"name":"animated","type":{"name":"boolean"}}] :::info
`target`  может быть как ReactNode, так и RefObject:
::: ```tsx
import React from 'react';
import styled from "styled-components";
import { surfaceSolid03 } from "@salutejs/plasma-tokens-web";
import { Popover, Button } from '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
const StyledContent = styled.div`
background: ${surfaceSolid03};
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
`;
return (
<section style={{width: '20rem', height: '15rem'}}>
<Popover
opened={isOpen}
onToggle={(is) => setIsOpen(is)}
role="presentation"
id="popover"
target={<Button>Target</Button>}
offset={[0, 6]}
placement='bottom'
trigger='click'
hasArrow
closeOnOverlayClick
closeOnEsc
isFocusTrapped
>
<StyledContent>
<>Content</>
<Button onClick={() => setIsOpen(false)}>close</Button>
</StyledContent>
</Popover>
</section>
);
}
```
```tsx
import React, { useRef, useState } from 'react';
import styled from "styled-components";
import { surfaceSolid03 } from "@salutejs/plasma-tokens-web";
import { Popover, Button } from '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = useState(false);
const targetRef = useRef<HTMLButtonElement | null>(null);
const targetRef2 = useRef<HTMLButtonElement | null>(null);
const targetRef3 = useRef<HTMLButtonElement | null>(null);
const refs = [targetRef, targetRef2, targetRef3];
const [currRefIndex, setCurrentRefIndex] = useState(0);
const [currentRef, setCurrentRef] = useState(targetRef);
const changeRef = () => {
let ind = currRefIndex + 1;
if (ind > refs.length - 1) {
setCurrentRefIndex(0);
ind = 0;
}
setCurrentRefIndex(ind);
setCurrentRef(refs[ind]);
};
const StyledContent = styled.div`
background: ${surfaceSolid03};
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
`;
return (
<>
<Button ref={targetRef}>Target 0</Button>
<Button style={{ margin: '0 5rem' }} onClick={changeRef}>
Change targetAsRef to Target {currRefIndex + 1 > refs.length - 1 ? 0 : currRefIndex + 1}
</Button>
<Button ref={targetRef2}>Target 1</Button>
<Popover
opened={isOpen}
onToggle={(is) => setIsOpen(is)}
role="presentation"
id="popover"
target={currentRef}
offset={[0, 6]}
placement='bottom'
trigger='click'
hasArrow
closeOnOverlayClick
closeOnEsc
isFocusTrapped
>
<StyledContent>
<>Content</>
<Button onClick={() => setIsOpen(false)}>Close</Button>
</StyledContent>
</Popover>
<div style={{ padding: '5rem' }}>Current Target: {currRefIndex}</div>
<Button ref={targetRef3}>Target 2</Button>
</>
);
}
```