yb-tooltip

Tooltip

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

Подключение

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

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

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

• Пример jsx

```javascript Это содержимое target

<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 {}