Fork me on GitHub

JQuery Tooltip Plugin
by gdakram

A simple animated hover tooltip JQuery plugin

Demo

Mouseover any of the item boxes you see on the page.

Ex. 1
Ex. 2
Ex. 3
Ex. 4
Ex. 5 Force Direction

Usage

HTML

<div class="your_selector">
  Help‽
  <div class="tooltip_description" 
    style="display:none;" 
    title="No worries">
    Help is on the way.
  </div>
</div>

Javascript

$("div.your_selector").tooltip();

Result

Help‽

Configuration Options

// Configuration options with defaults listed below.
'dialog_content_selector' : 'div.tooltip_description'
'animation_distance' : 50
'opacity' : 0.85
'arrow_left_offset' : 70
'arrow_top_offset' : 50
'arrow_right_offset' : 20
'arrow_height' : 20
'arrow_width' : 20
'animation_duration_ms' : 300
'event_in':'mouseenter'
'event_out':'mouseleave'
'hover_in_delay' : 0
'hover_out_delay' : 0

License

MIT License

Author/Contact

Shahrier Akram (shahrier.akram@gmail.com)

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/gdakram/JQuery-Tooltip-Plugin