@fengyuanchen/tooltip

Tooltip

A simple jQuery tooltip plugin.

• Demo

Main

dist/
├── tooltip.css     (2 KB)
├── tooltip.min.css (2 KB)
├── tooltip.js      (9 KB)
└── tooltip.min.js  (4 KB)

Getting started

Quick start

Three quick start options are available:

• Download the latest release.
• Clone the repository: git clone https://github.com/fengyuanchen/tooltip.git.
• Install with NPM: npm install @fengyuanchen/tooltip.

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/tooltip.css" rel="stylesheet">
<script src="/path/to/tooltip.js"></script>

Usage

Initialize with $.fn.tooltip method.

// With option
$('body').tooltip({
  autoshow: true,
  content: 'Hello, world!'
});

// With method
$('body').tooltip('show', 'Hello, world!');

// Shortcut
$('body').tooltip('Hello, world!');

Options

// Set tooltip options
$().tooltip(options);

// Change the global default options
$.fn.tooltip.setDefaults(options);

autohide

• Type: Boolean
• Default: true

Hide the tooltip automatically when timeout. requires duration option to be set.

autoshow

• Type: Boolean
• Default: true

Show the tooltip automatically when initialize. requires content option to be set.

content

• Type: String
• Default: ''

Tooltip content

countdown

• Type: Boolean
• Default: false

Show countdown view. requires duration option to be set.

dismissible

• Type: Boolean
• Default: false

Allow to dismiss the tooltip by click an attached close button before it is closed automatically.

duration

• Type: Number
• Default: 3000

Define the time of the tooltip showing (3 seconds by default).

fixed

• Type: Boolean
• Default: true

Fix the tooltip (Only available for body element).

offset

• Type: Number
• Default: 10

Offset of the tooltip from its parent.

position

• Type: String
• Default: 'center top'
• Options: 'left top', 'center top', 'right top', 'left middle', 'center middle', 'right middle', 'left bottom', 'center bottom', 'right bottom'

Position of the tooltip (horizontal and vertical)

style

• Type: String
• Default: 'default'
• Options: 'default', 'primary', 'success', 'info', 'warning', 'danger'

Style of the tooltip

zIndex

• Type: Number
• Default: 1024

Z-index of the tooltip.

Methods

$().tooltip('method', argument1, , argument2, ..., argumentN)

show([content[, options]])

• content (optional):
  • Type: String
  • Tooltip's content
• options (optional):
  • Type: String or Object
  • Tooltip's style or tooltip's options

Show the tooltip with new content.

$().tooltip('show', 'Hello, world!');
$().tooltip('show', 'Hello, world!', 'primary');
$().tooltip('show', 'Hello, world!', {
  style: 'primary',
  zIndex: 2048
});

Shortcut: $().tooltip(content, options)

• Only for show method
• The first argument must be a string (not one of the methods)

$().tooltip('Hello, world!', 'primary');

hide()

Hide the tooltip.

destroy()

Destroy the tooltip.

Events

show.tooltip

This event fires immediately when the show instance method is called.

shown.tooltip

This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).

hide.tooltip

This event is fired immediately when the hide instance method has been called.

hidden.tooltip

This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.tooltip.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="tooltip.js"></script>
<script>
  $.fn.tooltip.noConflict();
  // Code that uses other plugin's "$().tooltip" can follow here.
</script>

Browser Support

• Chrome (latest 2)
• Firefox (latest 2)
• Internet Explorer 8+
• Opera (latest 2)
• Safari (latest 2)

As a jQuery plugin, you also need to see the jQuery Browser Support.

License

Released under the MIT license.