Tooltip
Компонент позволяет выводить подсказку (тултип) при ховере или клике на элемент.
Usage
Пример:
import Tooltip from '@evo/tooltip'
import tooltipStyle from '@evo/tooltip/dist/themeWhite.css'
const Example = () => (
<Tooltip
css={tooltipStyle}
placement='right-start'
content={<span>some text goes here</span>}
isHover
>
reference element
</Tooltip>
);Dependencies
В проекте, который будет использовать данный компонент, должны быть установлены следующие зависимости:
"peerDependencies": {
"classnames": "^2.2.5",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"prop-types": "^15.6.1",
"react-onclickoutside": "^6.7.1"
},API
Tooltip компонент принимает в себя css, content, placement,
isHover, isFixed, isVisible, stickToViewport, delay
css
Используется для стилизирования компонента. Существует две темы themeWhite и themeBlack
Для подключения темы на проект:
import tooltipStyle from '@evo/tooltip/dist/themeBlack.css'
...
<Tooltip
css={tooltipStyle}
...
>
...
</Tooltip>
...Подключение своих стилей:
import tooltipStyle from 'path_to_your_styles.css'
...
<Tooltip
css={tooltipStyle}
...
>
...
</Tooltip>
...
content
Собственно сам контент, может быть как текст так и React-компонент.
placement
Управляет позиционированием тултипа относительно элемента для которого вызван.
placement может быть как top, right, bottom, left так и с суфиксами -start, -end
чтобы прикрепить тултип к краю элемента относительно которого он вызывается.
По умолчанию:
placement='bottom'
isHover
Заставляет тултип показыватся при наведении.
По умолчанию:
isHover={false}
isFixed
Делает тултип display: fixed. По умолчанию тултип позиционируется абсолютно относительно родителя, но иногда нужно чтобы он позиционировался относительно <body>.
По умолчанию:
isFixed={false}
isVisible
Делает тултип видимым по умолчанию.
По умолчанию:
isVisible={false}
stickToViewport
Делает тултип максимально видимым пока reference-элемент находится в зоне видимости окна.
По умолчанию:
stickToViewport={false}
delay
Задержка для срабатывания mouseLeave при isHover.
По умолчанию:
delay={100}