I am currently working with my first plugin(ie..tooltip plugin)and here is my code:
(function ($) {
$.fn.Tipify = function (options) {
/*setup default settings*/
var defaults = {
closeTipBtn: 'TipifyCloseBtn',
toolTipId: 'Tipify',
fixed: false,
showButtons: false,
tipContent: '',
TipifyStyle: 'defaultTheme',
xOffset: 15,
yOffset: -25,
onShow: null,
onHide: null
},settings = $.extend({}, defaults, options);
return this.each(function () {
var content = $(this);
if (content.attr('title')) {
var tipContent = content.attr('title');
} else {
var tipContent = settings.tipContent;
}
var buildTipify = function () {
$('body').append("<div id='" + settings.toolTipId + "' class='" + settings.TipifyStyle + "'><p class='TipifyContent'>" + tipContent + "</p></div>");
if (settings.showButtons == true) {
$('#' + settings.toolTipId + ' p.TipifyContent')
.append("<a id='" + settings.closeTipBtn + "' href='#' alt='close'>close</a>");
}
},
positionTipify = function () {
$('#' + settings.toolTipId).css({
top: (content.offset().top - $('#' + settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
left: (content.offset().left + content.outerWidth() + settings.xOffset) + 'px'
})
.stop().animate({ top: 'toggle' }, 80);
{
if ($.isFunction(settings.onShow)) {
settings.onShow(content);
}
};
},
removeTipify = function () {
$('#' + settings.toolTipId).stop().animate({ top: 'toggle' }, 80);
{
$(this).remove();
if ($.isFunction(settings.onHide)) {
settings.onHide(content);
}
};
};
if (settings.showButtons == false) {
content.hover(function () {
$('#' + settings.toolTipId).remove();
content.attr({ title: '' });
buildTipify();
positionTipify();
}, function () {
removeTipify();
});
}
if (settings.showButtons == true) {
content.click(function (el) {
$('#' + settings.toolTipId).remove();
content.attr({ title: '' });
buildTipify();
positionTipify();
$('#' + settings.closeTipBtn).click(function () {
removeTipify();
return false;
});
return false;
});
}
return this;
});
};
})(jQuery);
Here is my fiddle demo
Now Can anyone say me how to make this code much better(Better in the sense sweet,short and simple).
I have a problem that If I use my current animation it dosen't looks too good and other than fade I would like to use swing animation.Can anyone show me how to do that?
I want to show the popup down if the target is near to top and if it is near bottom I need to show it on the top similarly for left and to right.
How do I make the tooltip fixed(ie..not to close it)on page load.