Tooltip

Справочник по API

Обзор

Tooltip - это статический текст, который отображается в контейнере с абсолютным позиционированием. Tooltip появляется при наведении указателя мыши на нужный элемент страницы и может содержать текст с подсказкой или дополнительной информацией.

Также вы можете добавлять Tooltip для других компонентов, задавать и изменять его текстовое значение. Подробнее.

Инициализация

Чтобы инициализировать Tooltip, задайте нужные параметры в конструкторе webix.ui(), как на примере:

webix.ui({
  view:"tooltip", 
  template:"My #value#",
  height:100
}).show({id:1, value:"template"}, {x:0, y:0});

Свойства конфигурации

Единственное обязательное свойство для компонента Tooltip - это template.

Все остальные параметры необязательны и используются для настройки внешнего вида и положения компонента. С полным списком свойств Tooltip вы может ознакомится в специальном разделе документации.

Отображение Tooltip

Чтобы показать тултип, используйте метод show после инициализации.

Метод принимает два параметра:

data - (object) передаваемые в тултип данные. Содержит следующие свойства:
- id - (string/number) ID элемента данных
- value - (string) значение элемента данных
position - (object) координаты x и y положения тултипа.

Установленные значения координат x и y добавляются к заданным по умолчанию значениям параметров dx и dy. Свойства dx и dy определяют расстояние между указателем мыши и краем тултипа (по горизонтали и вертикали соответственно):
- x - (number) - координаты x
- y - (number) - координаты y

$$("tooltip").show({id:1, value:"template"}, {x:0, y:0});

Изменение отступа тултипа по умолчанию

Устанавливая положение для тултипа с помощью координат x и y, учитывайте заданные по умолчанию значения dx и dy - левый и правый отступы в соответствии со значениями x и y, переданными в метод show(). Значения по умолчанию следующие:

dx:20,
dy:0

Таким образом, заданное значение координат для x будет добавлено к значению по умолчанию dx: dx+x.

Например, если значение параметра x равно 10, то тултип будет перемещен на 30px.

Также и для координат y, значения свойств y и dy складываются, однако результат не изменится, потому что значение dy равно нулю: dy+y.

Чтобы изменить отступы тултипа по умолчанию, укажите желаемые значения свойствам dx и dy в объекте конфигурации:

{
  view:"tooltip", 
  dx:0, dy:30
}

Related sample: Tooltip: Custom Offset

Наверх