An easy tooltip plugin tutorial
This is a simple tooltip plugin. You have some parameter that you can use but not mandatory. This is very simple. Not a hot-&-sexy tooltip but you can work with it. Lets check the codes.
HTML Code:
[html]
Open InfoSorry! You are not allowed to see this info. Please verify your username and password.
Stop! Right there!!Do not enter through that door. You will be dead.
[/html]
In head tag:
[html]
[/html]
And the js-script:
[javascript]
$(document).ready(function() {
$(‘.help’).jTooltip();
$(‘.info’).jTooltip({
tip: ‘info’, //info, alert or help
});
$(‘.alert’).jTooltip({
tip: ‘alert’, //info, alert or help
color: ‘red’ //any color or color code
});
});
[/javascript]
jTooltip.css
[css]
.tipText{
display:none;
}
.jTooltip{
width:200px;
background:url(../images/arrow.png) no-repeat center bottom #FFFFFF;
position:absolute;
left:0;
padding-bottom:16px;
font-size:10px;
line-height:100%;
}
.jTooltip .jText{
border:2px solid #000000;
border-bottom:none;
padding:7px 7px;
}
.jTooltip img.jIcon{
margin-left:5px;
}
.jTooltip-v{
width:200px;
background:url(../images/arrow-v.png) no-repeat center top #FFFFFF;
position:absolute;
left:0;
padding-top:16px;
font-size:10px;
line-height:100%;
}
.jTooltip-v .jText{
border:2px solid #000000;
border-top:none;
padding:7px 7px;
}
.jTooltip-v img.jIcon{
margin-left:5px;
}
[/css]
jTooltip.js plugin:
[javascript]
(function($) {
$.fn.jTooltip = function(options)
{
var settings =
{
‘tip’: ‘help’,
‘color’: ‘#000′
};
var tooltipClass = “jTooltipâ€;
var methods =
{
tooltip: function(obj)
{
obj.hover(function(e) {
if(e.pageY < 100) tooltipClass = "jTooltip-v";
var html =obj.find('span.tipText').html();
obj.css({'position':'relative'});
switch(settings.tip)
{
case 'help':
var image = "
“;
break;
case ‘alert’:
var image = “
“;
break;
case ‘info’:
var image = “
“;
break;
}
html = “
“;
obj.append(html);
tlObj = obj.find(‘.’+tooltipClass);
var jTop = -(tlObj.height() + obj.height() + 3);
if(e.pageY < 100) jTop = obj.height();
tlObj.css({'color': settings.color, 'top': jTop});
}, function() {
$('.'+tooltipClass).remove();
obj.css({'position':'static'});
});
}
};
return this.each(function() {
if(options) $.extend(settings, options);
methods.tooltip($(this));
});
};
})(jQuery);
[/javascript]
This is my second plugin, but I think it will help new developers to learn about jquery plugin tutorial.
Grateful: Anjan Bhowmik
Demo: css-avenue.com/works/tooltip/
Download: css-avenue.com/works/tooltip/tooltip.zip
