CSS Tooltips

Create a Tooltip that appears when the user moves the mouse over an element.

Usage

To apply this feature, add the .tooltip class to any HTML element. By default Tooltip appears on the top. You can use an additional classes for appearance personalization. To appear on the bottom add the .tooltip-onbottom class, on the left .tooltip-onleft class, on the right .tooltip-onright class. It has 3 size modifiers: normal (set by default), for small size add .tooltip-sm class, for large size add .tooltip-lg class. By default text inside Tooltip aligned to the left, you can centered text by adding .tooltip-center class. Tooltip text must be entered between <span><span>Your Tooltip text here</span></span> tags.

Examples:

This is a simple text. Tooltip on Top This is a large size centered tooltip. It supports HTML elements. This is a simple text.

This is a simple text. Tooltip on Bottom This is a large size centered tooltip. It supports HTML elements. This is a simple text.

This is a simple text. Tooltip on Right This is a normal size tooltip. It supports HTML elements. This is a simple text.

This is a simple text. This is a simple text. Tooltip on Left This is a small size, centered tooltip. It supports HTML elements.

Tooltip with button This is a normal size, centered tooltip. Work with button elements.