addTooltip

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

target	string|HTMLElement	ID HTML элемента, сам элемент или компонент Webix
config	string|object	текст тултипа или настройки для него

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 - (функция) определяет, что произойдет после того, как курсор покинет целевую область

Наверх