@evo/tooltip
v0.4.0
Published
Tooltip component
Downloads
331
Maintainers
Keywords
Readme
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}