Tooltips

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!');
  }
});

Automatic Tooltips

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.

Custom Tooltips

In some cases you may want to display dynamic information about an element. There are several ways to do this:

  1. You can call the setTooltip method to update the tooltip content for an element. This approach is a good choice if the information doesn't change often.
  2. You can handle the popup event to update the tooltip content before it is shown to the user.
  3. Or you can call the show and hide methods at any time and completely customize what is shown to the user and when. You can also specify the area within the control that the tooltip refers to (e.g. a grid cell or a chart data point).

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.

Creator: a person or thing that brings something into existence.
synonyms: author, writer, designer, deviser, maker, producer.
Right: a moral or legal entitlement to have or obtain something or to act in a certain way.
synonyms: prerogative, power, license, permission, freedom.
Life: the condition that distinguishes animals and plants from inorganic matter, including the capacity for growth, reproduction, functional activity, and continual change preceding death.
synonyms: existence, being, living, animation.
Liberty: the state of being free from oppressive restrictions imposed on one's behavior.
synonyms: independence, freedom, autonomy, sovereignty.
Happiness: the state of being happy.
synonyms: pleasure, contentment, satisfaction, merriment, joy.
Government: the political direction and control exercised over the actions of the members, citizens, or inhabitants of communities, societies, and states.
Safety: the condition of being protected from or unlikely to cause danger, risk, or injury.
synonyms: welfare, well-being, protection, security.
People: the men, women, and children of a particular nation, community, or ethnic group.
synonyms: race, (ethnic) group, tribe, clan.