Creating Simple JQuery Tooltip

Introduction

This tip is about creating a very simple and cute tooltip with any HTML, CSS, JQuery versions!

The download source file above contains a Visual Studio 2013 project! But this JQuery library does not depend on C#, Visual Studio. So you can use this library in any technology or languages such as PHP, JSP, ASP.NET or even HTML.

Using the Code

Note that my JQuery Selector in the below code is a[title]. But you can use any selector that you want. For example img[title], or combination of a[title], img[title], etc.

 Collapse | Copy Code

        <script src="Scripts/jquery-2.1.1.min.js"></script>

        <script type="text/javascript">

            $(function () {

                var oToolTip =
                    $("<div id='myToolTip'>");

                oToolTip.hide();

                $("body").append(oToolTip);

                $("a[title]").each(function () {

                    var strTitle = $(this).attr("title");
                    $(this).removeAttr("title");
                    $(this).attr("data-tooltip", strTitle);

                });

                $("a[data-tooltip]").each(function () {

                    $(this).mouseenter(function (e) {

                        // **************************************************
                        var varWidth = $(this).width();
                        var varHeight = $(this).height();

                        var varTop = $(this).offset().top;
                        var varLeft = $(this).offset().left;

                        var varWidthOfToolTip = oToolTip.width();

                        var varDifference = 0;
                        var varLeftOfToolTip = 0;

                        varDifference = varWidth - varWidthOfToolTip;

                        varLeftOfToolTip = varLeft + (varDifference / 2);

                        var varTopOfToolTip = varTop + varHeight + 2;
                        // **************************************************

                        var strTitle =
                            $(this).attr("data-tooltip");

                        oToolTip.html(strTitle);
                        oToolTip.css("left", varLeftOfToolTip).css("top", varTopOfToolTip);

                        oToolTip.hide();
                        oToolTip.fadeIn(400);

                    });

                    $(this).mouseout(function (e) {

                        oToolTip.fadeOut(200);

                    });

                });

            });

        </script>

Source from

http://www.codeproject.com/Tips/833204/Creating-Simple-JQuery-Tooltip