Display fancy Tooltip on ASP.Net Ajax TabPanel MouseHover using jQuery

rakeshkuma
 
on Apr 01, 2022 10:54 PM
622 Views

Thank you dharmendr on keep on supporting,

I want to make tooltip or title in fancy way, any possibilities ?

Show Balloon ToolTip in ASP.Net

If you dont mind can you share small example as per my code.

Once again many thanks.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 04, 2022 08:03 AM

Hi rakeshkuma,

Apply jQuery tooltip.

Refer below code.

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1" CssClass="toolTip" ToolTip="Tooltip_TabPanel1">
        <ContentTemplate>
            Tab 1
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" CssClass="toolTip" ToolTip="Tooltip_TabPanel2">
        <ContentTemplate>
            Tab 2
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3" CssClass="toolTip" ToolTip="Tooltip_TabPanel3">
        <ContentTemplate>
            Tab 3
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
    $(".ajax__tab_tab").eq(0).attr("title", "Tab Panel  1 ToolTip");
    $(".ajax__tab_tab").eq(1).attr("title", "Tab Panel  2 ToolTip");
    $(".ajax__tab_tab").eq(2).attr("title", "Tab Panel  3 ToolTip");
    $(".ajax__tab_tab").hover(function () {
        $(this).tooltip();
    });
})
</script>

Screenshot