Skip to content

Instantly share code, notes, and snippets.

@monkeymonk
Created July 1, 2012 16:21
Show Gist options
  • Select an option

  • Save monkeymonk/3028852 to your computer and use it in GitHub Desktop.

Select an option

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

SiKni8 commented Mar 13, 2015

Copy link
Copy Markdown

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

@sanjayscet

Copy link
Copy Markdown

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