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:  A very simple jQuery slideshow – jSlider

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:  How to write dynamic css in a php file 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:  When edit page is disabled for any sharepoint page

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

You may also like

Leave a Reply