A Fully Configurable jQuery Tooltip Plugin - Tooltip.js

File Size: 264 KB
Views Total: 1472
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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.

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

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.

  // 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

// Destroy the plugin

5. Events

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

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

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

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

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.