jQuery Plugins › jQuery Tooltip Plugins › jQuery Tooltip.js

A Fully Configurable jQuery Tooltip Plugin - Tooltip.js

File Size: 264 KB
Views Total: 1478
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE9+, FireFox, Opera, Safari
A Fully Configurable jQuery Tooltip Plugin - Tooltip.js

Tooltip.js is a simple yet robust jQuery plugin that attaches a highly customizable and themeable tooltip to any DOM elements.

Features:

  • Auto hide after a timeout, with an optional countdown timer.
  • Dismissable with a close button.
  • Custom tooltip content.
  • Can be placed anywhere on your web page.
  • 5 built-in themes: primary, default, success, info, warning and danger.
  • Custom show / hide animation speed.

Basic usage:

1. Include the required stylesheet tooltip.css in the head and the script tooltip.js at the bottom of the web page.

<head>
  ...
  <link href="css/tooltip.css" rel="stylesheet">
  ...
</head>
<body>
  ...
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/tooltip.js"></script>
</body>

2. Shows a basic tooltip with custom content.

$('#SELECTOR').tooltip('show', 'I am a basic tooltip!');

3. Call the function to create a tooltip with configuration options.

$('#SELECTOR').tooltip({
  // Auto hide when timeout
  // Type: Boolean
  autohide: true,

  // Auto show after initialized
  // Type: Boolean
  autoshow: true,

  // Tooltip content
  // Type: String
  content: '',

  // Show countdown view
  // Type: Boolean
  countdown: false,

  // Allow to dismiss the tooltip before it is closed automatically
  // Type: Boolean
  dismissible: false,

  // Define the time of the tooltip showing (3 seconds by default)
  // Type: Number
  duration: 3000,

  // Fix the tooltip (Only available for body element)
  // Type: Boolean
  fixed: true,

  // Offset of the tooltip from its parent
  // Type: Number
  offset: 10,

  // Position of the tooltip (horizontal and vertical)
  // Type: String
  // Options:
  //   'left top',    'center top',    'right top',
  //   'left middle', 'center middle', 'right middle',
  //   'left bottom', 'center bottom', 'right bottom'
  position: 'center top',

  // Style of the tooltip
  // Type: String
  // Options: 'default', 'primary', 'success', 'info', 'warning', 'danger'
  style: 'default',

  // Z index of the tooltip
  // Type: Number
  zIndex: 1024
});

4. Public methods.

// Show a tooltip with custom options
$('#SELECTOR').tooltip('show', 'I am a tooltip!', {
  // options here
});

// Hide the tooltip
$('#SELECTOR').tooltip('hide')

// Destroy the plugin
$('#SELECTOR').tooltip('destroy')

5. Events

// fired immediately when the show instance method is called.
show.tooltip

// fired when the tooltip has been made visible to the user 
// will wait for CSS transitions to complete
shown.tooltip

// fired immediately when the hide instance method has been called.
hide.tooltip

// fired when the tooltip has finished being hidden from the user
// will wait for CSS transitions to complete
hidden.tooltip

Change log:

v0.0.2 (2015-06-22)

  • Support a shortcut for showing message content.
  • Improve the options argument of "show" method.

This awesome jQuery plugin is developed by fengyuanchen. For more Advanced Usages, please check the demo page or visit the official website.