jQuery Tooltip using Visual Studio

This jQuery tutorial, we will discuss jQuery Tooltip using Visual Studio. This tip is about creating a very simple and cute tooltip with any HTML, CSS, JQuery versions!

jQuery Tooltip

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>

You can download full source code here.

You may like following jQuery tutorials:

• Display SharePoint List items in a data table using Rest API and jQuery
• How to show Progress Bar in Asp.Net using jQuery?
• Asp.Net MVC 5 Cascading DropDown List Using jQuery
• How to include jQuery in SharePoint
• JQuery Tabs using content search web part in SharePoint 2013
• Get dropdown selected value and text using jquery in SharePoint Online
• Redirect user to another page in SharePoint 2013/2016/Online using JavaScript or jQuery
• SharePoint 2013/2016: Change Width of List Column using Designer and jQuery

Here we learned how to show jQuery Tooltip Using Visual Studio.