Tooltip

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

Подключение

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

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

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

• Пример jsx

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

Пропсы <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 {}