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]

What is this?Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Open InfoSorry! You are not allowed to see this info. Please verify your username and password.

You may also read:  Change input type text to password type onclick – JQuery

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;
}

You may also read:  Unique display name and nickname in wordpress

[/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 = “

” + image + 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.

You may also read:  PHP: Convert number into Text (Amount into words)

Grateful: Anjan Bhowmik
Demo: css-avenue.com/works/tooltip/
Download: css-avenue.com/works/tooltip/tooltip.zip

You may also like...

Leave a Reply

%d bloggers like this: