Creating Simple JQuery Tooltip

• Download source code - 1.1 MB

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.

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

<script type="text/javascript">

    $(function () {

        var varToolTip = $("<div id='DtxToolTip'>");

        varToolTip.hide();

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

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

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

        });

        $("a[data-tooltip]").bind("mouseenter", function (e) {

            // **************************************************
            var varMargin = 2;
            var varBodyWidth = $("body").width();

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

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

            var varWidthOfToolTip = varToolTip.width();
            var varTopOfToolTip = varTop + varHeight + varMargin;

            var varDifference = varWidth - varWidthOfToolTip;
            var varLeftOfToolTip = varLeft + (varDifference / 2);

            if (varLeftOfToolTip < varMargin) {
                varLeftOfToolTip = varMargin;
            }
            else {
                if (varLeftOfToolTip + varWidthOfToolTip > varBodyWidth - varMargin) {
                    varLeftOfToolTip = varBodyWidth - varWidthOfToolTip - varMargin;
                }
            }
            // **************************************************

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

            varToolTip.html(strTitle);

            varToolTip.css("top", varTopOfToolTip);
            varToolTip.css("left", varLeftOfToolTip);

            varToolTip.hide();
            varToolTip.fadeIn(400);

        });

        $("a[data-tooltip]").bind("mouseout", function (e) {

            varToolTip.fadeOut(200);

        });

    });

</script>

By the way, you can easily change the style of ToolTip.

<style type="text/css">

    div#DtxToolTip {

        top: 0px;
        left: 0px;
        z-index: 1000000;
        position: absolute;

        width: 200px;
        min-height: 30px;

        margin: 0px;
        padding: 4px;
        border-width: 2px;
        border-style: outset;
        border-color: #CCCCCC #808080 #808080 #CCCCCC;

        color: Blue;
        background-color: #CCCCFF;

        font-size: 8pt;
        font-family: Verdana;

    }
</style>

History

This is version 1.1: In this version, I fixed some bugs and optimized source code.