Tooltips are champions at improving user experience. These pop-up messages guide users through your web app, providing clues and other useful information. Webix Tooltips can be added anywhere: to DataTable headers and footers, controls, HTML elements, etc.
Live demo >>
Webix JavaScript tooltips have several advantages as if compared to HTML tooltips:
- You can add any text, markup, or image;
- It is possible to display different text in a tooltip window depending on conditions (when you define a tooltip as a function);
- You can effortlessly customize tooltips is the same way as Webix data templates.
How to apply
You can easily add Webix tooltips to your app. You need just one setting for it. See the example below:
{ view:"button", value:"Make everything great", tooltip:true },
{ view:"datatable", autoConfig:true, tooltip:true }
Good
Great
Make everything Great
If you would like to make the content of a tooltip more diverse, you can use familiar template strategies. Such an approach will allow you to get the result that you strive for. There are some hints below showing how to achieve it. Pay attention, the way you add a tooltip depends on a target widget or UI element.
Add a tooltip anywhere you like
You can equip almost any item of your app with a tooltip. Check out the showcases below.
Items of Webix data widgets
If you need a tooltip with just a small text message for data widgets, you can add it via tooltip: true. But you can also attach an image or dynamic text to a message. Webix tooltips can also display any HTML content.
{
view:"list",
width:250,
select:true,
tooltip:function(obj){
return "<div>" + obj.lname + ", " + obj.fname + "</div>";
},
// ...rest of the config
}
It's also possible to use your CSS classes and change the place where tooltips pop up. To do this, define tooltip as an object and add the necessary settings:
{
view:"list",
width:250,
select:true,
tooltip:{
template:obj => {
//... same tooltip template as above
},
dx:10, dy:10,
css:"persons_tooltip"
},
// ...rest of the config
}
Tooltips and controls
You can set tooltips for any form controls by means of tooltip: true. It allows adding simple default tooltips which display the value of the control. Have a look at the example of how you can insert a tooltip which shows a selected date of a datapicker.
webix.ui({
view:"datepicker", tooltip:true
});
You can also create something more sophisticated using the same principles as for data item tooltips. The only thing is that the contents displayed by tooltips come from the control settings, but not from the data.
{
view:"datepicker",
tooltip:obj => {
var result = "";
if (obj.value){
var age = Math.floor((new Date() - obj.value) / (1000 * 60 * 60 * 24 * 365));
result += "Client is " + age + " years old";
}
return result || "Age is unknown";
}
}
A control with options is another story. In this case, you can add a tooltip for every option.
{
view:"radio", name:"notifications",
label:"Notifications",
tooltip:obj => {
var result = obj.id%2 ? "" : "no";
return "You will receive" + result + "email notifications.";
},
options:[
{ id:1, value:"Yes" },
{ id:2, value:"No" }
]
}
DataTable and Webix tooltips
Webix tooltips provide outstanding user experience with DataTable. It's possible to add clues to almost any element of it.
Headers and footers
Tooltips for headers and footers allow you to inform users about the features they can be unaware of. For example, hovering a mouse over a header will call a window with the information that the list can be sorted by name when you click the header. You can also set tooltips as:
- true (default tooltips that show the ‘text’ of the header),
- string,
- function that receives the object of a header line.
webix.ui({
view:"datatable",
tooltip:true, footer:true,
columns:[
{
id:"", header:{
text:"Purchase",
tooltip:"Click to sort the list by #text# name"
// "Click to sort the list by Purchase name"
}
},
{
id:"sum", header:"Cost",
tooltip:false,
footer:{
content:"summColumn",
tooltip:"Total money flow"
}
}
// ...other columns
]
});
A header or a footer with a filter or an aggregator requires a more complicated tooltip function. You can turn to the getHeaderContent method to display the sum in the footer of the column.
webix.ui({
view:"datatable",
tooltip:true, footer:true,
columns:[
{
id:"", header:{
text:"Purchase",
tooltip:"Click to sort the list by #text# name"
}
},
{
id:"sum", header:"Cost",
tooltip:false,
footer:{
content:"summColumn",
tooltip:obj => {
var sum = this.$$("grid").getHeaderContent(obj.contentId).getValue();
return "Total money flow: " + sum;
}
}
}
// ...other columns
]
});
Tooltips for Sparklines
You can add tooltips for cells that show sparklines. You have two options:
1. tooltip:true allows you to show a bigger variant of sparklines,
- a special column tooltip if you want to show them for sparkline items.
To do this, define the tooltip as a function, which in this case receives one more parameter – the value of the sparkline item.
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 || "";
}
}
]
});
Tooltips for any HTML areas
Webix tooltips can pop up anywhere you like, e.g., when you hover the mouse over a picture. All you need to do is:
- to set tooltips for the widget with the tooltip setting,
- to set tooltip text as the webix_tooltip attribute to the HTML element.
{
view:"multicombo", name:"tags", id:"mcb",
placeholder:"Click to add tags",
options:tags,
tooltip:true
}
// ...
var delIcons = $$("mcb").$view.querySelectorAll(".webix_multicombo_delete");
for (var i = 0; i < delIcons.length; i++){
delIcons[i].setAttribute(
"webix_tooltip",
"<span class="danger">Click to remove the badge</span>"
);
}
The example above shows how to apply tooltips to the whole widget. If you want the tooltips to show up only in particular areas, you can use lower-level API. [TooltipControl(https://docs.webix.com/api__refs__tooltipcontrol.html) will help in this case:
webix.ui({
id:"photo",
template:`<img style="height: 260px;" src="/photos/jim.jpg" />`,
// ... other config
});
...
webix.TooltipControl.addTooltip($$("photo").$view);
Tooltips for HTML elements
You can add Webix Tooltips even to the body of the document where it's possible to place Webix and a non-Webix layout.
Check out the guidelines for creating a static text tooltip:
- Give the HTML area an ID.
- Use the TooltipControl mixin and its addTooltip() method that expects the ID and the text of the tooltip.
// html code
<div class="label"><label for="title">Book title</label></div>
<div><input id="title" name="title" type="text" value="" placeholder="Title" /></div>
// js code
webix.TooltipControl.addTooltip("title", "Enter book title");
It would be inconvenient to call addTooltip() many times, especially when you need a lot of tooltips for several HTML areas. Luckily, you can add the webix_tooltip attribute with the text to the areas and then enable “tooltip ability” for their common parent area with addTooltip():
// html code
<fieldset id="genre">
<div id="genre1"><label for="genre1">Poetry</label></div>
<div id="genre2"><label for="genre2">Horror</label></div>
</fieldset>
//js code
webix.TooltipControl.addTooltip("genre");
You can also create dynamic tooltips. They will depend on the changing contents of the master area. To enable this, you will have to provide extra customization handlers within addTooltip(). The handlers define the tooltip behavior and can be used to change it.
See the example of how you can create a dynamic tooltip for a textarea. Note, the tooltip will show an empty field if you don't type anything in it. $tooltipIn handler will determine the view of the tooltip.
// html code
<div class="label">
<label for="annotation">Annotation</label>
</div>
<textarea id="annotation" cols="40" name="annotation" rows="5">
Some book annotation is here
</textarea>
// js code
webix.TooltipControl.addTooltip("annotation", {
$tooltipIn:function(node){
var tooltip = webix.TooltipControl.getTooltip();
tooltip.define("template", function(){
return node.value||"Empty field";
});
return node;
}
});
Bottom line
In the hunt for tricks allowing to improve user experience, it would be wise to pay attention to tooltips. If they are well-styled and applied in the right place, users can learn how to work with your web app very quickly and effortlessly. If you build your software solutions using a UI library, make sure that its tooltips are customizable, so that you could change them to meet your requirements.
Top comments (0)