addTooltip

добавляет тултип над элементом HTML или компонентом

void addTooltip(string|HTMLElement target,string|object config);

Parameters

targetstring|HTMLElementID HTML элемента, сам элемент или компонент Webix
configstring|objectтекст тултипа или настройки для него
Details

addTooltip() добавляет элемент в список областей страницы, над которыми отображается тултип. Если этот элемент первый, addTooltip() создает тултип.

Использование

Вы можете создать простой тултип, который будет появляться над областью HTML:

webix.TooltipControl.addTooltip("list","Books by Jeff Noon");

Где "list" - это ID тега div, например:

<div id="list">
...
</div>

Вы также можете создать тултипы для компонентов Webix:

{
    view:"datatable", id:"grid",
    // ...другие настройки
}
// ...
webix.TooltipControl.addTooltip($$("grid"),"Книжки Джеффа Нуна");

Настройки

Функция addTooltip может использоваться для настройки тултипов, например, для создания динамических тултипов для элементов HTML:

webix.TooltipControl.addTooltip("annotation", {
    $tooltipIn:function(node){
        let tooltip = webix.TooltipControl.getTooltip();
        tooltip.define("template", function(){
            return node.value || "Ничего";
        });
        return node;
    }
});

Где "annotation" - это ID текстового поля:

<textarea rows="5" cols="40" name="annotation" id="annotation">
    Аннотация книги...
</textarea>

У объекта config есть свойства, которые можно переопределить:

  • $tooltipIn - (функция) определяет, как появится тултип
  • $tooltipMove - (функция) определяет поведение тултипа при перемещении курсора внутри элемента HTML
  • $tooltipOut - (функция) определяет, что произойдет после того, как курсор покинет целевую область
Наверх