Thursday, June 21, 2012

Tool tip Effect in Jquery


-------Html----------------

--------Html End--------------
------------Jquery----------------
$("input[type='button'].btnClear").after("
");
$('h6.toolTip').css({ font: 'bold 13px arial', width: '140px', padding: '10px 10px 20px 10px', top: '10px', right: '270px', position: 'absolute' }).hide();
$("input[type='button'].btnClear").hover(function () {
$('h6.toolTip').animate({
opacity: 'show', top: '-5px'
}, 'slow');
var toolTipTxt = $("input[type='button'].btnClear").attr('name');
$('h6.toolTip').text(toolTipTxt);
});
$("input[type='button'].btnClear").on('mouseout', function () {
$('h6.toolTip').animate({
opacity: 'hide', top: '10px'
}, 'slow');

});
---------Jquery End-------

No comments:

Post a Comment