[Solved] ASP.Net AJAX TabContainer Tooltip hiding behind TabPanel in jQuery

rakeshkuma says:

    <script type='text/javascript'>             

        $(function () {

            $(".ajax__tab_tab").eq(0).attr("data-title", "Tab Panel 1");

            $(".ajax__tab_tab").eq(1).attr("data-title", "Tab Panel 2");

        })             

    </script>

Replace above with below code.

<script type='text/javascript'>             
    $(function () {
        $(".ajax__tab_tab").eq(0).attr("title", "Tab Panel 1");
        $(".ajax__tab_tab").eq(1).attr("title", "Tab Panel 2");
    })
</script>

Check the example.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link rel="stylesheet" href='../assets/css/tab.css' type='text/css' />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />
    <script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>

    <script type='text/javascript'>             
        $(function () {
            $(".ajax__tab_tab").eq(0).attr("title", "Tab Panel 1");
            $(".ajax__tab_tab").eq(1).attr("title", "Tab Panel 2");
        })
    </script>

    <style type="text/css">
        [data-title]:hover:after {
            opacity: 1;
            transition: all 0.1s ease 0.5s;
            visibility: visible;
        }

        [data-title]:after {
            content: attr(data-title);
            bottom: -1.6em;
            left: 100%;
            padding: 4px 4px 4px 8px;
            color: #222;
            white-space: nowrap;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 4px #222;
            -webkit-box-shadow: 0px 0px 4px #222;
            box-shadow: 0px 0px 4px #222;
            background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
            background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
            background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
            background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
            background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
            opacity: 0;
            position: absolute;
            z-index: 99999;
            visibility: hidden;
        }

        [data-title] {
            position: relative;
        }
    </style>


    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <section class="container-fluid block location-block">
        <div class="container">

            <div class="row">
                <div class="col-sm-12" style="margin-top: 10px; padding-right: 0px;">
                    <ajax:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="100%" Width="100%">
                        <%--TAB 1  : TabPanel1 --%>
                        <ajax:TabPanel runat="server" HeaderText="<i class='fa fa-bars'></i>&nbsp; TabPanel1" ID="TabPanel1">
                            <ContentTemplate>
                                <div class="row" style="margin-top: 0px;">TabPanel1</div>
                            </ContentTemplate>
                        </ajax:TabPanel>

                        <%--TAB 2 : TabPanel2 --%>
                        <ajax:TabPanel runat="server" HeaderText="<i class='fa fa-bars'></i>&nbsp; TabPanel2" ID="TabPanel2">
                            <ContentTemplate>
                                <div class="row" style="margin-top: 0px;">TabPanel2</div>
                            </ContentTemplate>
                        </ajax:TabPanel>
                    </ajax:TabContainer>
                </div>
            </div>
        </div>
    </section>
</asp:Content>

Screenshot