yb-tooltip v1.1.0

Tooltip

Tooltip для всплывающих подсказок Посмотреть как работает

Подключение

• Импортируем

import {Target, Tooltip} from "yb-tooltip";

Примеры использования

• Пример jsx

<Target
    event="hover"
    place="mouse"
    position="bottom"
>
    Это содержимое target

    <Tooltip>Это текст тултипа</Tooltip>
</Target>

Пропсы \<Target>

• String className - привязка дополнительных стилей default=""
• String event - событие для появления тултипа default="hover"
  • hover - при наведении мыши на \<Target>
  • click - при клике по \<Target>
• String place - место появления тултипа default="mouse"
  • mouse - относительно мыши
  • target - относительно элемента \<Target>
• String position - место положения тултипа относительно элемента появления default="bottom"
  • bottom - под местом появления (под курсором мыши или элементом \<Target>)
  • top - над местом появления

События \<Target>

• onMouseOver(Event event) при наведении мыши на \<Target>
• onMouseMove(Event event) при движении мыши по \<Target>
• onMouseOut(Event event) при выходе курсора мыши за пределы \<Target>
• onClick(Event event) при клике по \<Target>
• onHide() при закрытии \<Tooltip>

Пропсы \<Tooltip>

• String className - привязка дополнительных стилей default=""
• Object callbacks - для внешних вызовов методов \<Tooltip> default={}

Внешние вызовы \<Tooltip>

• $setStyle(Object style) установка css-стилей вызывается из \<Target> Если использовать \<Tooltip> отдельно, вне Target, то через $setStyle можно устанавливать стили отображения

Иерархия стилей CSS

.Target {
  .Tooltip {
    .tooltipContent {}
    .arrows {
      .arrowTop {}
      .arrowBottom {}
    }
  }
}
.Target.position_bottom {}
.Target.position_top {}