Skip to content

Instantly share code, notes, and snippets.

@monkeymonk
Created July 1, 2012 16:21
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save monkeymonk/3028852 to your computer and use it in GitHub Desktop.
Easy Tooltip 1.0 - jQuery plugin
/*
* Easy Tooltip 1.0 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
(function($, window, undefined){
$.fn.easyTooltip = function(options){
// default configuration properties
var defaults = {
xOffset: 10
, yOffset: 25
, tooltipId: 'easyTooltip'
, clickRemove: false
, content: ''
, useElement: ''
}, content
options = $.extend(defaults, options)
return this.each(function(){
var title = $(this).attr('title')
$(this).hover(function(e){
content = (options.content != '') ? options.content : title
content = (options.useElement != '') ? $('#' + options.useElement).html() : content
$(this).attr('title', '')
if(content != '' && content != undefined){
$('body').append('<div id="' + options.tooltipId + '">"' + content + '</div>')
$('#' + options.tooltipId).css({
position: 'absolute'
, top: (e.pageY - options.yOffset) + 'px'
, left: (e.pageX + options.xOffset) + 'px'
, display: 'none'
})
.fadeIn('fast')
}
}, function(){
$('#' + options.tooltipId).remove()
$(this).attr('title', title)
})
.mousemove(function(e){
$('#' + options.tooltipId).css({
top: (e.pageY - options.yOffset) + 'px'
, left: (e.pageX + options.xOffset) + 'px'
})
})
if(options.clickRemove){
$(this).mousedown(function(e){
$('#' + options.tooltipId).remove()
$(this).attr('title', title)
})
}
})
}
})(jQuery, window)
@SiKni8
Copy link

SiKni8 commented Mar 13, 2015

Can I add negative value for the X&Y position?

@sanjayscet
Copy link

Hi,
I have implemented this js. but getting duplicate tooltip on the window.

Please suggest some resolution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment