🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Tooltip.js is a simple, fast jQuery plugin used to create custom hover-triggered tooltips where the text is extracted from title or data attribute.


Documentation

tooltip

A simple jQuery plugin to enable quick tooltips.

Installation

To get this to work, you'll need both the JavaScript and CSS files.

<link rel="stylesheet" href="dist/css/tooltip.css" type="text/css" /> <script src="dist/tooltip.js" type="text/javascript"></script>

Usage

Tooltips can be set up on any item, and when the user puts the mouse over that item, the tooltip will show. By default the title attribute will be used to select what text is shown.

<ul id="menu">     <li><a href="#" title="This is a tooltip!">Option 1</a></li>     <li><a href="#" title="This is another tooltip!">Option 2</a></li> </ul>
$('#menu a').tooltip();

Options

Option Type Default Description
title String "" What text to show in the tooltip. If blank, it will use either the title attribute or the data-title attribute on the element.
delay Integer 0 The delay in milliseconds befor the tooltip shows on mouseover.
direction String "below" What direction to show the tooltip. By default the tooltip will show below the element if it's in the top two-thirds of the screen, and above it if it's below that. Can be either "above," "below," or "left" for now.

You May Also Like