Tooltip

Documentation updated on February 7th.

Description

The Tooltip widget is a member of Floats family. It gives more information about an UI element on the screen.

Demo

Hold the mouse over the image for a few seconds:

Code snippet

<img id="example" src="/src/assets/ninja.png" title="How many ninjas do you need..." alt="Ninja" />

Instance component

This is the way to create a new tooltip:

var foo = $("#example").tooltip();

As any Floats children, the Tooltip has a few uses cases you can use to modifiy and manipulate its content, its size and positioning.

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").tooltip({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Tooltip API documentation.

Basics

Show and hide

All Floats exposes some public methods called show and hide, both allow you to manage the Tooltip behavior programmatically. Something like this:

foo.show(); // Shows the tooltip
foo.hide(); // Hides the tooltip

Read more about Floats.

Get and set content

All Floats exposes a public method called content, it works as a getter and a setter at the same time. To get the content of this component simply use the method without arguments, like this:

var content = foo.content(); // Get its content

To set content add an argument to the method content, admits static content, DOM content or AJAX content. See an example:

foo.content("New content!"); // Set its content

Read more about Content.

Positioning

Chico has an great utility to position things on screen, is called Positioner. All Floats has a position method related to the , you can use it to redefine Tooltip positioning. See an example:

foo.position({
	"offset": "0 10",
	"points": "lt lb"
});

As you can see, we pass a configuration object to the position method with some properties. The offset property let you define a specific pixel values for X and Y axis indentation.

The points  property defines the position relation between the element and its context. In this case, the value "lt lb" literally says: The element will be positioned by joining its left-bottom point with its context by its left-top point.

Read more about Positioner.

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Tooltip API documentation.

Learn more about events on our step-by-step guide.