Jquery:ToolTip

Add New js file in the js folder named  'tltip.js'and write some code

(function($) {
    $.fn.extend({
        tltip: function(options) {
        var settings = $.extend({ delay: 300, pause: 5000, animationSpeed: 500 }, options);
            return this.each(function() {
                var control = $(this);
                var iconDirection = 'left';
                var toolTipContainer = $('<div class="tltip-container"><div class="tltip-body">' + control[0].attributes["tltitle"].nodeValue + '' +
                                        '<img   class="tltip-close"   /></div><div class="tltip-icon"></div></div>');

                control.before(toolTipContainer);
                var delay = settings.delay;
                var toolTip = toolTipContainer;
                toolTip.css({ display: 'none' }).find('div').css({ display: 'none', opacity: 0 });
                var toolTipBody = $('.tltip-body', toolTipContainer);
                var toolTipIcon = $('.tltip-icon', toolTipContainer);

                var interval;
                control.mouseover(function() {
                    var position = $(this).offset();
                    var left = position.left;
                    var top = position.top;

                    left += $(this).outerWidth();

                    toolTipBody.css('left',12);
                    toolTipIcon.css('left', 0);

                    toolTip.css({ left: left, top: top });
                    interval = setTimeout(function() {
                        showToolTip(toolTip);
                    }, delay);
                }).mouseout(function() {

                    hideToolTip(toolTip);

                }).keydown(function() {
                    clearTimeout(interval);
                });

                $('.tltip-close', toolTipContainer).click(function() {
                    hideToolTip(toolTip);
                });

                function showToolTip(toolTip) {
                    toolTip.css({ display: '' })
                    .find('div').css('display', '')
                    .stop(false, true)
                    .animate({ opacity: 1 }, settings.animationSpeed, function() {
                        setTimeout(function() {
                            hideToolTip(toolTip);
                        }, settings.pause);

                    });
                }


                function hideToolTip(toolTip) {

                    toolTip.css({ display: 'none' })
                    .find('div')
                    .stop(false, true)
                    .animate({ opacity: 0 }, settings.animationSpeed, function() {
                        $(this).css('display', 'none');
                    });
                }

            });
        }
    });
})(jQuery);


CSS:
Add new css files named 'tltip.css' and write code..

.tltip-container
{
    height: 70px;
    width: 252px;
    position: absolute;
}
.tltip-body
{
     color: White;
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    width: 220px;
    height: 39px;
    padding: 10px;
    padding-right:20px;
    position: relative;
    float: left;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(PIE.htc);
    background-color: #D5AF1C;
}
 

.tltip-icon
{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    margin-top: 12px;
    border-color: transparent #D5AF1C transparent transparent;
}

.tltip-close
    {
    background:url(../images/x.png) no-repeat;
    width:25px; height:29px;
    display:inline; z-index:3200;
    position:absolute;
    top:-12px;
    right:-10px;
    cursor:pointer;
}

Add close image:

In html code:

Take reference in 'html' tag
 css/tltip.css
 js/jquery-1.4.3.min.js
 js/tltip.js


Write javascript code in html page

 <script type="text/javascript">
        $(document).ready(function () {
        $("[tltitle]").tltip();
        });
    </script>




 Add one div and three input box with new attribute named 'tltitle'

       <div id="demo">
            <input type="text" tltitle="Tooltip1." id="purple" />
            <br />
            <input type="text" tltitle="Tooltip2" id="green" />
            <br />
            <input type="text" tltitle="Tooltip3" id="yellow" />
           
        </div>