hi everyone, This is the first time I try to add javascript to my webpage. What I want to do is basically add a tooltip to rows in a gridview. Now, I found this link which generates the code for me: http://www.guistuff.com/tooltipgen.shtml copy/pasting the tooltip code worked fine. However, I do not get how to add this code to my gridview: <a href="javascript:void(0)" onMouseover="EnterContent('ToolTip','Tooltip Title','Tooltip Content'); Activate();" onMouseout="deActivate()">ToolTip Me</a> Code (markup): so I have to tag this to this object: <asp:GridView Style="left: 186px; position: absolute; top: 171px" ID="GridView" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceRemote" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="335px" Height="119px" OnRowDataBound="GridView_RowDataBound" DataKeyNames="CA_Name" Font-Names="Verdana" Font-Size="Small"> <RowStyle ForeColor="#000066" /> <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /><FooterStyle BackColor="White" ForeColor="#000066" /> <Columns> <asp:BoundField DataField="CA_Name" HeaderText="Competency Area" SortExpression="CA_Name" /> <asp:BoundField DataField="Week_of_Availability" HeaderText="Week" SortExpression="Week_of_Availability" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" /> <asp:BoundField DataField="Date_of_entry" HeaderText="Date of Entry" SortExpression="Date_of_entry" DataFormatString="{0:M-dd-yyyy}" HtmlEncode="False" /> </Columns> </asp:GridView> Code (markup): how do I do this? Thanks for your help! oh and I tried creating a templatefield and then add the code in it, but I got this error message: Validation (Internet Explorer 6): The element 'a' cannot be nested within the element 'templatefield'. being a newbie in ASP I just can't figure out what I am doing wrong...
Inside the template field you need to have a <ItemTemplate> or <EditItemTemplate> etc subject to which mode the row is in. Your link would then go inside that. You dont say where you want the tooltip to come in so it is hard to say?
well actually I need the tooltip on each rows, ideally on each columns. The last and probably most complicated part is that the rows are filled with the data of a SQL server table, and the tooltip would show the data from the column named "description" for that row
well AstarothSolutions I've tried what you told me and the column appeared, and the results would look acceptable for my needs. However, when I mouseover the column I don't get the popup and all it says is that there is an error on the page. No hint whatsoever as to where it is though... I'll copy/paste the whole code of the page and put in bold what I added to get that tooltip up: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="FormMain.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> <!-- // --> [B]</script> <style type="text/css"> <!-- .tooltiptitle{COLOR: #66CCFF; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-weight: bold; font-size: 8pt} .tooltipcontent{COLOR: #0000000; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-size: 8pt} #ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:4; visibility:hidden;} --> </style> <script language = "javascript"> <!-- ContentInfo = ""; topColor = "#FFFFFF" subColor = "#FFFFFF" var mouse_X; var mouse_Y; var tip_active = 0; function update_tip_pos(){ document.getElementById('ToolTip').style.left = mouse_X + 20; document.getElementById('ToolTip').style.top = mouse_Y; } var ie = document.all?true:false; if (!ie) document.captureEvents(Event.MOUSEMOVE) document.onmousemove = getMouseXY; function getMouseXY(e) { if (ie) { // grab the x-y pos.s if browser is IE mouse_X = event.clientX + document.body.scrollLeft; mouse_Y = event.clientY + document.body.scrollTop; } else { // grab the x-y pos.s if browser is NS mouse_X = e.pageX; mouse_Y = e.pageY; } if (mouse_X < 0){mouse_X = 0;} if (mouse_Y < 0){mouse_Y = 0;} if(tip_active){update_tip_pos();} } function EnterContent(TTitle, TContent){ ContentInfo = '<table border="0" width="100" cellspacing="0" cellpadding="0">'+ '<tr><td width="100%" bgcolor="#000000">'+ '<table border="0" width="100%" cellspacing="1" cellpadding="0">'+ '<tr><td width="100%" bgcolor='+topColor+'>'+ '<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+ '<tr><td width="100%">'+ '<font class="tooltiptitle"> '+TTitle+'</font>'+ '</td></tr>'+ '</table>'+ '</td></tr>'+ '<tr><td width="100%" bgcolor='+subColor+'>'+ '<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+ '<tr><td width="100%">'+ '<font class="tooltipcontent">'+TContent+'</font>'+ '</td></tr>'+ '</table>'+ '</td></tr>'+ '</table>'+ '</td></tr>'+ '</table>'; } function tip_it(which, TTitle, TContent){ if(which){ update_tip_pos(); tip_active = 1; document.getElementById('ToolTip').style.visibility = "visible"; EnterContent(TTitle, TContent); document.getElementById('ToolTip').innerHTML = ContentInfo; }else{ tip_active = 0; document.getElementById('ToolTip').style.visibility = "hidden"; } } //--> </script>[/B] </head> <body> [B]<div id="ToolTip"></div>[/B] <form id="form1" runat="server"> <div> <div ms_positioning="GridLayout" style="left: 1px; width: 976px; position: relative; top: 4px; height: 657px" id="DIV1" language="javascript" onclick="return DIV1_onclick()"> <asp:Label ID="LabelSecond" runat="server" Font-Names="Verdana" Font-Size="Medium" ForeColor="DodgerBlue" Style="left: 281px; position: absolute; top: 125px" Font-Bold="True">Remote option</asp:Label> <asp:Label ID="LblAnswer" runat="server" Font-Names="Verdana" Font-Size="Medium" ForeColor="DodgerBlue" Style="left: 644px; position: absolute; top: 125px" Font-Bold="True">On site option</asp:Label> <asp:Label ID="Label29" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small" ForeColor="DodgerBlue" Style="left: 32px; position: absolute; top: 213px">GSDC</asp:Label> <asp:DropDownList ID="DropDownGSDC" runat="server" AutoPostBack="True" Style="left: 32px; position: absolute; top: 229px" DataSourceID="SqlDataSourceGSDC" DataTextField="GSDC_name" DataValueField="GSDC_name"> </asp:DropDownList> <asp:Button ID="Button1" runat="server" Style="left: 32px; position: absolute; top: 286px" Text="New availability" Width="95px" /> <asp:SqlDataSource ID="SqlDataSourceGSDC" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [GSDC_name] FROM [tbl_GSDC]"></asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSourceLocation" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [Location] FROM [tblLocation]"></asp:SqlDataSource> <asp:DropDownList ID="DropDownPA" runat="server" AutoPostBack="True" Style="left: 32px; position: absolute; top: 184px" DataSourceID="SqlDataSourcePA" DataTextField="PA_name" DataValueField="PA_name"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSourceDetail" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [Description] FROM [VIEWLatestDate] WHERE (([PA_Name] = @PA_Name) AND ([GSDC_Name] = @GSDC_Name) AND ([CA_Name] = @CA_Name))"> <SelectParameters> <asp:ControlParameter ControlID="DropDownPA" Name="PA_Name" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="DropDownGSDC" Name="GSDC_Name" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="GridView" Name="CA_Name" PropertyName="SelectedValue" Type="String" /> </SelectParameters> </asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSourcePA" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [PA_name] FROM [tbl_PA]"></asp:SqlDataSource> <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small" ForeColor="DodgerBlue" Style="left: 35px; position: absolute; top: 160px">Practice Area</asp:Label> <asp:Label ID="LabelGSDC" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Medium" ForeColor="DodgerBlue" Style="left: 455px; position: absolute; top: 45px">GSDC Brazil</asp:Label> <asp:GridView Style="left: 544px; position: absolute; top: 150px" ID="GridView3" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceOnSite" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Height="119px" Width="336px" DataKeyNames="CA_Name" Font-Names="Verdana" Font-Size="Small"> <Columns> <asp:BoundField DataField="CA_Name" HeaderText="Competency Area" SortExpression="CA_Name" /> <asp:BoundField DataField="Week_of_Availability" HeaderText="Week" SortExpression="Week_of_Availability" > <FooterStyle HorizontalAlign="Right" /> <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" /> <asp:BoundField DataField="Date_of_entry" HeaderText="Date of entry" SortExpression="Date_of_entry" DataFormatString="{0:M-dd-yyyy}" HtmlEncode="False" /> </Columns> <FooterStyle BackColor="White" ForeColor="#000066" /> <RowStyle ForeColor="#000066" /> <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /> </asp:GridView> <asp:LinkButton ID="LinkNTC" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small" ForeColor="DodgerBlue" Style="left: 34px; position: absolute; top: 261px">Region Americas</asp:LinkButton> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [Date of entry] AS Date_of_entry, [Description], [Week of Availability] AS Week_of_Availability, [Year], [Location], [GSDC_Name], [PA_Name], [CA_Name] FROM [VIEWLatestDate] WHERE (([Week of Availability] = @Week_of_Availability) AND ([Year] = @Year))"> <SelectParameters> <asp:ControlParameter ControlID="GridView" Name="Week_of_Availability" PropertyName="SelectedValue" Type="Int32" /> <asp:ControlParameter ControlID="GridView" Name="Year" PropertyName="SelectedValue" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> </div> <asp:SqlDataSource ID="SqlDataSourceOnSite" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [CA_Name], [Week of Availability] AS Week_of_Availability, [Year], [Date of entry] AS Date_of_entry FROM [VIEWLatestDate] WHERE (([Location] = @Location) AND ([PA_Name] = @PA_Name) AND ([GSDC_Name] = @GSDC_Name)) ORDER BY [CA_Name]"> <SelectParameters> <asp:Parameter DefaultValue="On site" Name="Location" Type="String" /> <asp:ControlParameter ControlID="DropDownPA" Name="PA_Name" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="DropDownGSDC" Name="GSDC_Name" PropertyName="SelectedValue" Type="String" /> </SelectParameters> </asp:SqlDataSource> </div> <asp:SqlDataSource ID="SqlDataSourceRemote" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [CA_Name], [Week of Availability] AS Week_of_Availability, [Year], [Date of entry] AS Date_of_entry FROM [VIEWLatestDate] WHERE (([PA_Name] = @PA_Name) AND ([GSDC_Name] = @GSDC_Name) AND ([Location] = @Location)) ORDER BY [CA_Name]"> <SelectParameters> <asp:ControlParameter ControlID="DropDownPA" Name="PA_Name" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="DropDownGSDC" Name="GSDC_Name" PropertyName="SelectedValue" Type="String" /> <asp:Parameter DefaultValue="Remote" Name="Location" Type="String" /> </SelectParameters> </asp:SqlDataSource> <asp:GridView Style="left: 186px; position: absolute; top: 171px" ID="GridView" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceRemote" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="335px" Height="119px" OnRowDataBound="GridView_RowDataBound" DataKeyNames="CA_Name" Font-Names="Verdana" Font-Size="Small"> <RowStyle ForeColor="#000066" /> <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /><FooterStyle BackColor="White" ForeColor="#000066" /> <Columns> <asp:BoundField DataField="CA_Name" HeaderText="Competency Area" SortExpression="CA_Name" /> <asp:BoundField DataField="Week_of_Availability" HeaderText="Week" SortExpression="Week_of_Availability" > <ItemStyle HorizontalAlign="Right" /> </asp:BoundField> <asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" /> <asp:BoundField DataField="Date_of_entry" HeaderText="Date of Entry" SortExpression="Date_of_entry" DataFormatString="{0:M-dd-yyyy}" HtmlEncode="False" /> [B] <asp:templatefield> <itemtemplate> <a href="javascript:void(0)" onMouseover="EnterContent('ToolTip','Tooltip Title','Tooltip Content'); Activate();" onMouseout="deActivate()">i</a> </itemtemplate> </asp:templatefield> [/B] </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSourceDetailOnSite" runat="server" ConnectionString="<%$ ConnectionStrings:BestEffort_DevConnectionString %>" SelectCommand="SELECT [Description] FROM [VIEWLatestDate] WHERE (([PA_Name] = @PA_Name) AND ([GSDC_Name] = @GSDC_Name) AND ([CA_Name] = @CA_Name) AND ([Location] = @Location))"> <SelectParameters> <asp:ControlParameter ControlID="DropDownPA" Name="PA_Name" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="DropDownGSDC" Name="GSDC_Name" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="GridView3" Name="CA_Name" PropertyName="SelectedValue" Type="String" /> <asp:Parameter DefaultValue="on site" Name="Location" Type="String" /> </SelectParameters> </asp:SqlDataSource> </form> </body> </html> Code (markup):