Loading ...

jQuery: How to make a simple tooltip plugin,Tooltip with jQuery | CodeAsp.Net

jQuery: How to make a simple tool tip plugin

 /5
0 (0votes)

In this blog I will show how to make a simple jQuery tooltip plugin. Generally we need to show tooltips on hyperlinks t o show some information or detail regarding the link. Below is the screenshot how the tooltip will be displayed. 




Let's start writing the jQuery plugin. Here is the code for it :

/* Tooltip plug-in */
        (function ($) {
            $.fn.extend({
                tip: function (options) {
                    var defaults = {
                        maxWidth: '400px',
                        offset: 20,
                        theme: 'redTip'
                    };

                    /*
                    extend the options
                    */
                    var options = $.extend(defaults, options);

                    return this.each(function () {
                        var o = options;
                        var instance = $(this);
                        var theme = o.theme;

                        instance.hover(function () {
                            var item = $(this);
                            tip = $('<div id=\'tip\'><p>' + item.attr('alt') + '</p></div>');
                            tip.addClass(o.theme).appendTo('body');
                            tip.show();
                        },

				function () {
				    tip.hide();
				}).mousemove(function (e) {

				    var offset = 20;
				    var xCord = e.pageX + offset; //Get X coodrinates
				    var yCord = e.pageY + offset; //Get Y coordinates
				    if (typeof tip != 'undefined') {
				        var tipWidth = tip.width(); //Find width of tooltip
				        if (tip.width() > parseInt(o.maxWidth, 10)) {
				            tip.width(o.maxWidth);
				        }

				        var tipHeight = tip.height(); //Find height of tooltip
				        var distFromRight = $(window).width() - (xCord + tipWidth);
				        var disFromBottom = $(window).height() - (yCord + tipHeight);

				        //If there is not enough space on the right or bottom side just flip it
				        if (distFromRight < offset) {
				            xCord = e.pageX - tipWidth - offset;
				        } if (disFromBottom < offset) {
				            yCord = e.pageY - tipHeight - offset;
				        }
				        tip.css({ left: xCord, top: yCord });
				    }
				});
                    });
                }
            });
        })(jQuery);

 

 

Above you can see there is "theme" property exposed which user can set to whatever class which he wants to apply on the tooltip. The CSS used for the tooltip is below:

#tip
        {
            position: absolute;
            z-index: 1000;
            display: none;
            padding: 5px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            word-wrap: break-word;
        }
        .greenTip
        {
            color: #fff;
            background: #1B6453;
        }
        .redTip
        {
            color: #fff;
            background: #AF1E2D;
        }
        .blueTip
        {
            color: #fff;
            background: #23238E;
        }




Full sample code:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
        #tip
        {
            position: absolute;
            z-index: 1000;
            display: none;
            padding: 5px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            word-wrap: break-word;
        }
        .greenTip
        {
            color: #fff;
            background: #1B6453;
        }
        .redTip
        {
            color: #fff;
            background: #AF1E2D;
        }
        .blueTip
        {
            color: #fff;
            background: #23238E;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            $('.showTip').tip();  
        });

        /* Tooltip plug-in */
        (function ($) {
            $.fn.extend({
                tip: function (options) {
                    var defaults = {
                        maxWidth: '400px',
                        offset: 20,
                        theme: 'redTip'
                    };

                    /*
                    extend the options
                    */
                    var options = $.extend(defaults, options);

                    return this.each(function () {
                        var o = options;
                        var instance = $(this);
                        var theme = o.theme;

                        instance.hover(function () {
                            var item = $(this);
                            tip = $('<div id=\'tip\'><p>' + item.attr('alt') + '</p></div>');
                            tip.addClass(o.theme).appendTo('body');
                            tip.show();
                        },

				function () {
				    tip.hide();
				}).mousemove(function (e) {

				    var offset = 20;
				    var xCord = e.pageX + offset; //Get X coodrinates
				    var yCord = e.pageY + offset; //Get Y coordinates
				    if (typeof tip != 'undefined') {
				        var tipWidth = tip.width(); //Find width of tooltip
				        if (tip.width() > parseInt(o.maxWidth, 10)) {
				            tip.width(o.maxWidth);
				        }

				        var tipHeight = tip.height(); //Find height of tooltip
				        var distFromRight = $(window).width() - (xCord + tipWidth);
				        var disFromBottom = $(window).height() - (yCord + tipHeight);

				        //If there is not enough space on the right or bottom side just flip it
				        if (distFromRight < offset) {
				            xCord = e.pageX - tipWidth - offset;
				        } if (disFromBottom < offset) {
				            yCord = e.pageY - tipHeight - offset;
				        }
				        tip.css({ left: xCord, top: yCord });
				    }
				});
                    });
                }
            });
        })(jQuery);
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Lorem Ipsum is simply dummy a text of the printing and <a class="showTip" alt="Lorem Ipsum is simply dummy a text"
        href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard
    dummy text ever since the 1500s, when an unknown printer took a galley of type and
    <a class="showTip" alt="Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker" href="#">scrambled</a>
    it to make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like <a class="showTip" alt="Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to make a
    type specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged." href="#">Aldus PageMaker including
        versions of Lorem Ipsum</a>. Lorem Ipsum is simply dummy text of the printing
    and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
    ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including
    versions of <a class="showTip" alt="Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to make a
    type specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting, remaining essentially unchanged.It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It was popularised
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker." href="#">Lorem
        Ipsum</a>
    </form>

</body>
</html>



                                                                 

Do let me know your feedback, comments.

Comments (no comments yet)

Top Posts