# Tooltip Props (свойства) для компонента Tooltip: [{"name":"text","type":{"name":"ReactNode"}},{"name":"opened","type":{"name":"boolean"}},{"name":"target","type":{"name":"ReactNode"}},{"name":"placement","type":{"name":"Placement | ComputedPlacement[]"}},{"name":"hasArrow","type":{"name":"boolean"}},{"name":"animated","type":{"name":"boolean"}},{"name":"offset","type":{"name":"[number, number]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"usePortal","type":{"name":"boolean"}},{"name":"minWidth","type":{"name":"string | number"}},{"name":"maxWidth","type":{"name":"string | number"}},{"name":"onDismiss","type":{"name":"(() => void)"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"zIndex","type":{"name":"string"}},{"name":"size","type":{"name":"string"}},{"name":"view","type":{"name":"string"}},{"name":"trigger","type":{"name":"enum","raw":"\"none\" | \"hover\" | \"click\"","value":[{"value":"\"none\""},{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"mouseEnterDelay","type":{"name":"number"}},{"name":"mouseLeaveDelay","type":{"name":"number"}},{"name":"hoverTimeout","type":{"name":"number"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"arrow","type":{"name":"boolean"}},{"name":"isVisible","type":{"name":"boolean"}},{"name":"isOpen","type":{"name":"boolean"}}] ## Базовое применение `Tooltip`  оборачивает собой любой компонент и открывается в заданную сторону(причем можно передавать массив, тогда сторона будет определяться автоматически из переданных). Предполагается оборачивать иконки из пакета  `@salutejs/plasma-icons`
```tsx
import React from 'react';
import { Tooltip, Button } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{display: 'grid', gridTemplateColumns: 'repeat(3, max-content)', gridGap: '1rem 3.5rem', padding: '3.5rem'}}>
<Tooltip
target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" />}
placement="top-start"
opened
text="top-start"
view="default"
/>
<Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" />
<Tooltip
target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" />}
placement="top-end"
opened
text="top-end"
/>
<Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" />
<Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" />
<Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" />
</div>
);
}
```
## Отображение при взаимодействии с  `target` Помимо выставления  `opened`  в  `true/false`  можно управлять отображением по ховеру или клику через свойство  `trigger` . При открытии по клику доступны свойства из  `Popover` , такие как  `closeOnEsc`  и  `closeOnOverlayClick` . 
```tsx
import React from 'react';
import { Tooltip, Button } from '@salutejs/plasma-web';
export function App() {
return (
<>
<Tooltip target={(<Button>trigger: hover</Button>)} text="По ховеру" placement="right" hasArrow trigger="hover" hoverTimeout={500} />
<br />
<Tooltip target={(<Button>trigger: click</Button>)} text="По клику" placement="right" hasArrow trigger="click" closeOnEsc closeOnOverlayClick />
</>
);
}
```