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.

Current Tags

0.0.2 ... latest (11 years ago)

1 Versions

0.0.2 [deprecated] ... 11 years ago