Show default div instead of default tooltip with controls !!!

For this we have text in title attribute of controls so we have to create a div on mouse over and hide on mouse out event. So we can create a function and call this fuction with desired controls.

In this fucntion we must have customized div propery say color etc. and we can use fade funcions of jQuery

this function is follwos :

(function($) {
$.fn.tooltip = function(options) {

var
defaults = {
background: '#fffdf0',
color: 'black',
rounded: true

},
settings = $.extend({}, defaults, options);

this.each(function() {
var $this = $(this);
var title = this.title;

if ($this.attr('title') != '') {
this.title = '';
$this.hover(function(e) {
// mouse over
if ($this.children("div[tooltip]").length < 1) {

$('

')
.appendTo($this)
.html(title)//If we want to show decorate text with HTML styles
//.text(title)//If we need to show simple text
.hide()
.css({
position:'absolute',
backgroundColor: settings.background,
color: settings.color,
top: e.pageY + 10,
left: e.pageX + 20
})

.fadeIn(550);

}
else {
$this.children("div[tooltip]").html(title)
.fadeIn(550)

}

if (settings.rounded) {
$this.children("div[tooltip]").addClass('rounded');
}
}, function() {
// mouse out
$this.children("div[tooltip]").remove()
.fadeIn(550)
});
}

$this.mousemove(function(e) {
$this.children("div[tooltip]").css({
top: e.pageY + 10,
left: e.pageX + 20
});
});

});
// returns the jQuery object to allow for chainability.
return this;
}
})(jQuery);


We have to call this function :)

[script language="javascript" type="text/javascript"]
$(document).ready(function() {
$("a","#SectionOfPage").tooltip();

});

[/script]

Where "a" in control type and it It will apply only in div SectionOfPage.


Thanks
Mahesh K. Sharma