Wijmo provides a Tooltip class that allows you to add tooltips to any element on the page.
You can use the Tooltip class in two modes:
Automatic Mode: Use the setTooltip method to connect the Tooltip to one or more elements on the page. The Tooltip automatically monitors events and displays tooltips when the user performs actions that trigger them. For example:
// create the tooltip object var tt = new wijmo.Tooltip(); // associate the tooltip with one or more controls tt.setTooltip('#menu', 'Select commands.'); tt.setTooltip('#tree', 'Explore the hierarchy.'); tt.setTooltip('#chart', '#idChartTooltip');
Manual Mode: The caller is responsible for showing and hiding the tooltip using the show and hide methods. For example:
// create the tooltip object var tt = new wijmo.Tooltip(); // show the tooltip when the user clicks an element element.addEventListener('click', function () { if (tt.isVisible) { tt.hide(); } else { tt.show(element, 'Thanks for clicking this important element!'); } });
The paragraph below has some automatic tooltips:
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. -- That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, -- That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
In some cases you may want to display dynamic information about an element. There are several ways to do this:
The grid below illustrates the last approach. The controller handles the grid's mousemove event and shows a tooltip with information about the cell under the mouse.