@n3/react-tooltip

Tooltip component for react applications based on @n3/kit

Usage no npm install needed!

<script type="module">
  import n3ReactTooltip from 'https://cdn.skypack.dev/@n3/react-tooltip';
</script>

README

@n3/react-tooltip

Компонент для создания всплывающих подсказок для приложений на базе @n3/kit.

import Tooltip from '@n3/react-tooltip';

...

<Tooltip
  tooltip="Подсказка"
>
  {({
    innerProps,
    ref,
  }) => (
    <span
      {...innerProps}
      ref={ref}
    >
      Наведите, чтобы увидеть подсказку
    </span>
  )}
</Tooltip>

Props

Название Обязательность Тип Значение по умолчанию Описание
tooltip + node Контент тултипа
placement string 'bottom' Расположение popper-компонента
popperStyle objectOf {
  any
}		 {} Дополнительные стили popper-компонента
popperProps objectOf {
  any
}		 {} Дополнительные опции popper-компонента
children + func Функция рендера тултипа
@param {Object} renderProps
@param {Object} renderProps.ref - ref dom-элемента, открывающего тултип
@param {Object} renderProps.innerProps - props, которые должны переданы dom-элементу, открывающему тултип
@param {boolean} renderProps.isOpen - открыт ли тултип