Тултипы

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

Тултипы для столбцов по умолчанию

Чтобы задать тултип по умолчанию для всех столбцов, установите tooltip:true. Тултип по умолчанию показывает значение ячейки, на которую указывает курсор мыши.

Тултип для DataTable

webix.ui({
    view:"datatable",
    tooltip:true,
    columns:[
        { id:"name", header:"Name" },
        { id:"age", header:"Age" }
    ],
    data:[
        { id:1, name:"Ann", age:25 },
        { id:2, name:"Tom", age:27 }
    ]
});
// например, тултип для первого столбца первой строки в "Ann"

Общая функция для тултипа

Вы также можете задать тултип для всех столбцов как функцию. Внутри объекта common вы можете получить доступ к настройкам соответствующего столбца и показать нужный тултип.

webix.ui({
    view:"datatable",
    tooltip:function(obj, common){
        //obj - row object
        //common.column - configuration of related column
        return "<i>" + obj[common.column.id] + "</i>";
    },
    columns:[
        { id:"name", header:"Name" },
        { id:"age", header:"Age" }
    ]
});

Пользовательский тултип для определенного столбца

Вы можете настроить тултип для каждого столбца. Например, вы можете добавить текст и стиль. Для этого вам нужно задать тултипы столбца как темплейт или функцию.

Темплейт-строка. Тултип обращается к к значениям элемента данных, т.о. чтобы отобразить их, добавьте имя поля с символом # c обеих сторон. Вы также можете удалить тултип для определенного столбца, задав tooltip:false.

webix.ui({
    view:"datatable",
    tooltip:true,
    columns:[
        {
            id:"name", header:"Name",
            tooltip:"<span class='name_column_tip'>My name is #name#. I'm #age#.</span>"
        },
        { id:"age", header:"Age", tooltip:false }
    ],
    data:[
        { id:1, name:"Ann", age:25 },
        { id:2, name:"Tom", age:27 }
    ]
});
// тултип для первого столбца первой строки будет "My name is Ann. I'm 25."

Темплейт-функция Тултипы для столбца также могут быть заданы как функция, которая получает объект элемента данных:

webix.ui({
    view:"datatable",
    tooltip:true,
    columns:[
        {
            id:"name", header:"Name",
            tooltip:function(object){
                return "My name is " + obj.name + ". I'm " + obj.age + ".";
            }
        },
        { id:"age", header:"Age" }
    ],
    data:[
        { id:1, name:"Ann", age:25 },
        { id:2, name:"Tom", age:27 }
    ]
});

Related sample: Tooltips

Обратите внимание что тултип заданный для столбца переопределяет тултип заданный для всей таблицы.

Задать тултип для определенного столбца

Чтобы задать тултип только для определенного столбца, установите свойство тултипа для Datatable ак { template:"" } и поместите настройку tooltip:false для каждого выбранного столбца:

{
    view:"datatable",
    columns:[
        { id:"title", fillspace:true, tooltip:true, header:"Film title" },
        { id:"year", header:"Year"},
        { id:"votes", header:"Votes"}
    ],
    tooltip:{template:""},
    data:grid_data
}

Тултипы для хедеров и футеров

Вы можете добавить Webix Tooltip для хедера и футера DataTable.

Тултипы для хедера могут быть определены как:

true - в тултипах будет текст из хедера
темплейт-строка, которая может получить доступ к свойствам хедера/футера,
функция, получающая объект хедера/футера.

webix.ui({
    view:"datatable",
    footer:true, tooltip:true,
    columns:[
        {
            id:"title", width:200,
            header:{ text:"Film", tooltip:true }
        },
        {
            id:"year", width:80,
            header:{ text:"Year", tooltip:"Release date is #text#" }
        },
        {
            id:"votes", width:100,
            header:{ text:"Votes", tooltip:function(obj){ return obj.text; } },
            footer:{ content:"summColumn", tooltip:"Votes sum" }
        }
    ],
    data:some_data
});

Related sample: Tooltip:: Datatable

Отображение данных хедера/футера

Внутри тултип-функции вы можете обратиться к объекту конфигурации хедера/футера.

Если у вас есть фильтр или другой элемент содержимого в этой строке, вы можете получить его с помощью метода getHeaderContent по ID как obj.contentId и указать его текущее значение для тултипа:

webix.ui({
    view:"datatable", id:"dt",
    footer: true, tooltip:true,
    columns:[
        {
            id:"votes", header:[{text:"Votes", rowspan:2, tooltip:"#text#"}, ""],
            width:100, footer:{
                content:"summColumn",
                tooltip:function(obj){
                    var value = $$("dt").getHeaderContent(obj.contentId).getValue();
                    return "Total value: " + value;
                }
            }
        }
   ]
});

Related sample: Tooltip:: Datatable

Тултип для спарклайн

Если в столбце Datatable есть спарклайн, тултип по умолчанию будет также отображать этот спарклайн. Вы можете изменить тултипы и, например, показывать в них значения пунктов спарклайна:

webix.ui({
    view:"datatable",
    data:[
        { id:1, name:"Austria", income:[710, 780, 390, 660, 600] },
        { id:2, name:"France", income:[810, 500, 780, 800, 940] }
    ],
    tooltip:true,
    columns:[
        {
            id:"income", header:"Income per Month",
            template:"{common.sparklines()}", width:200,
            tooltip:function(obj,common,value){
                return value || "";
            }
        }
    ]
});

Тултип-функция в этом случае получает 3 параметра:

obj (object) - объект данных строки Datatable,
common (object) - темплейт-объект столбца,
value (number) - значение элемента спарклайна.

Наверх