How to Display data in Tooltip in Gridview using JQUERY

Hi friends,In this Article i would like to explain how to Show tooltip in gridview using Jquery.Sometimes its necessary to display more content in the gridview.Instead of display
complete data in gridview its better to use Tootip.We already have a default tootip to display data but customise that Tooltip using CSS and Jquery its look more beautiful.i have Downloaded this JQuery and CSS files from  here http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/...By using this i integrated into Aspnet Application








So friends lets start how to integrate this tooltip in Gridview

Fisrt open the microsoft Visual studio 2008

Next,select one Aspnet Application

Next,Open the source page of Default.aspx.cs

Next,Add the following links in Head Section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.timers.js"></script>
<script type="text/javascript" src="inc/jquery.dropshadow.js"></script>
<script type="text/javascript" src="inc/mbTooltip.js"></script>
<link rel="stylesheet" type="text/css" href="css/mbTooltip.css" title="style1"  media="screen" />

Next Add the script tag

<script type="text/javascript">
  $(function()
{
    $("[title]").mbTooltip({ 
      opacity : .97,      
     wait:100,         
     cssClass:"default", 
     timePerWord:70,     
      hasArrow:false,            
     hasShadow:true,
      imgPath:"images/",
      ancor:"mouse", 
      shadowColor:"black", 
      mb_fade:200 
    });
  });
</script>

Next,come to the body section and drag and drop one gridview from the toolbox


Next,Bind the data to that gridview.after this, the gridview will be looklike this

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" 
            CellPadding="3" CellSpacing="2" DataKeyNames="FestivalID" 
            DataSourceID="SqlDataSource1">
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />            
            <Columns>            
                <asp:TemplateField HeaderText="FestivalID" InsertVisible="False" 
                    SortExpression="FestivalID">
                    <EditItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("FestivalID") %>'></asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("FestivalID") %>' ToolTip='<%# Bind("Description") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="FestivalName" SortExpression="FestivalName">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FestivalName") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("FestivalName") %>'></asp:Label>
                        <asp:Image ID="ImgIN" runat="server" Height="30px" ImageUrl="~/images/incall.gif" ToolTip="Incoming Call" Width="30px" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Date" SortExpression="Date">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Date") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("Date") %>'></asp:Label>
                        <asp:Image ID="ImgOut" runat="server" Height="30px" 
                                            ImageUrl="~/images/outcall.gif" ToolTip="Outgoing Call" Width="30px" />
                    </ItemTemplate>
                </asp:TemplateField>
                
            </Columns>
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        </asp:GridView>

Thats it..


For downloading the CSS and Javascripts ClickHere


Finally the output will look like this...(see the below picture)

About the Author

Sayyad is a Software Engineer, Blogger and Founder of Developers Code from India.His articles mainly focus on .Net (Web and Windows based applications), Mobile Technologies (Android,IPhone,BlackBerry) and SEO.

Reach Him :

Google+

Facebook

Twitter

Pinterest