Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Adds a tooltip-like popup upon hovering the mouse over an element.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
GPL-LICENSE.txt
MIT-LICENSE.txt
README.markdown
addhint.js
addhint.min.js
addhint.zip
package.json
sample.html

README.markdown

jQuery addHint Plugin

A jQuery plugin that adds a tooltip to an element.

With this plugin you can display tooltips on hovering an element. You are not limited to simple texts. You can use HTML formatting even in the title attribute. Or you can generate the content by javascript and pass to the plugin. The content can be aligned to the target’s any edge, and will make sure the popup not goes off-screen.

The popup will not go away as long as you hover the mouse over it, or an input element inside has focus. Will also take care of the touch devices, where no mouse leave event exists, and will fade the popup automatically after 3 seconds (configurable).

Syntax

$(layer).addHint(content, { options });
  • content text, html or jQuery element
options:
  • gap the distance between the two elements' edges
  • posX, posY reference point of the element to be aligned 0 = ALIGN_LEFT or 1 = ALIGN_CENTER or 2 = ALIGN_RIGHT, 0 = ALIGN_TOP or 1 = ALIGN_MIDDLE or 2 = ALIGN_BOTTOM
  • toX, toY reference point of the target element ( the same as above )
  • id the class name of the popup element if you wish to style it
  • css the CSS attributes array { property: 'value', ... } which will replace the default
  • stay the length the popup should on before goes away on touch devices

Demo

http://lazaworx.com/static/addhint-plugin/sample.html

Usage

// Using the target element's title attribute:
$('.target').addHint();

// Adding custom text, HTML content as argument
$('.target').addHint('Simple <b>HTML</b> code');

// Adding a jQuery element as argument
var el = $('<div>').text('a jQuery element').css({
    display:'inline-block',
    backgroundColor:'#066', 
    color:'#fff',
    padding:'1em'
}).hide().appendTo('body');

$('.target').addHint(el, { 
    posX: ALIGN_LEFT, 
    posY: ALIGN_MIDDLE,
    toX: ALIGN_RIGHT,
    toY: ALIGN_MIDDLE,
    gap: 0
});

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Laszlo Molnar

Something went wrong with that request. Please try again.