@evo/tooltip

Tooltip component

Stats

StarsIssuesVersionUpdatedCreatedSize
@evo/tooltip
0.4.02 years ago4 years agoMinified + gzip package size for @evo/tooltip in KB

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}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.