I would like to show a tooltip when the user hover the mouse over the template column(hyperlink) of a gridview. The tooltip should be bound to a field of the gridview's datasource that correspond to the row being hovered. How can I do that ?
thanks
Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
List<User> lstUser = // some method to poplate your users
gUsers.DataSource = lstUsers;
gUsers.DataBind();
UMMMM... WAIT WHAT? How did i think you wanteda hyperlink. Anyways, ill leave this in there. If you want to apply it to the template, you can do it two ways that i can think of...
1. You can use a panel inside the Item Template and set width and height to 100% and set tootip to that.
2. Or you can provide a OnItemCreated Function for your GridView.
Then in that function use e.Items to apply atributes to the template. That will do it.
i'm looking to have multiple Eval to show in the showtip? is that possible in .aspx ? i understand about onmouseover from code-behind but just curious to know about multiple Eval
Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
You can always have multiple Eval functions. But you can not call any server method on any Javascript event it will give error.
Like onmouseover='<%# "showtip("'" + Eval("FirstLastName") + "'")"%>' will give error.
Since you are trying to call Eval function (which is server side) on client side event.
Before call of the function only you have to make all the tooltip data ready.
In order to use multiple Eval to show the tooltip you can try this safe method:
That is, onmouseover='<%# "showtip(" + Eval("fieldName") + ")"%>'
If you're using VB.NET, change '+' to '&'.
If your problem isn't solved, please inform us.
Regards
i have a offset problem i think,
when i scroll down the page and mouseover the icon to show the tooltip but whats happening is, the tooltip is showing all the way at very top of the page
how do i make sure the tooltip is next to mouseover (whatever the control i place?)
thanks.
Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
nisarkhan
Contributor
2402 Points
1472 Posts
show tooltip in gridview
Jul 28, 2007 04:22 AM|LINK
I would like to show a tooltip when the user hover the mouse over the template column(hyperlink) of a gridview. The tooltip should be bound to a field of the gridview's datasource that correspond to the row being hovered. How can I do that ?
thanks
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
triggered
Contributor
3356 Points
908 Posts
Re: show tooltip in gridview
Jul 28, 2007 04:42 AM|LINK
What Object are you binding too? Since you didnt provide one, i will make it up. Lets call it Users, and it has properties UserName and FullName;
Pretend you want to show the Username in the link and ToolTip the FullName, you would do this...
<asp:GridView id="gUser" runat="server" autogeneratecolumns="False">
<Columns>
<TemplateField>
<asp:HyperLink id="hlUser" runat="server" text='<%# Eval("UserName") >' ToolTip='<%# Eval("FullName") %>' > </asp:HyperLink>
</TemplateField>
</Columns>
</asp:GridView>
// in your page load event do...
List<User> lstUser = // some method to poplate your users
gUsers.DataSource = lstUsers;
gUsers.DataBind();
UMMMM... WAIT WHAT? How did i think you wanteda hyperlink. Anyways, ill leave this in there. If you want to apply it to the template, you can do it two ways that i can think of...
1. You can use a panel inside the Item Template and set width and height to 100% and set tootip to that.
2. Or you can provide a OnItemCreated Function for your GridView.
Then in that function use e.Items to apply atributes to the template. That will do it.
nisarkhan
Contributor
2402 Points
1472 Posts
Re: show tooltip in gridview
Jul 28, 2007 05:17 PM|LINK
i mean to say, something like this
http://www.dotnetbips.com/articles/36f06160-5221-4d27-a177-320927f4b962.aspx
but the sample does not work and i get the javascript error.
thanks.
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
Allen Chen –...
All-Star
40943 Points
4949 Posts
Re: show tooltip in gridview
Jul 30, 2007 04:42 AM|LINK
Hi:
You can refer to following code in my previous case. Just put the <a> to ItemTemplate and use Binding Expression.
<head runat="server">
<script type="text/javascript">
document.write(
"<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #528AC6;\
;background-color:#ffdfd0; height: 19px; left: 77px; top: 96px\"></div>");
function showtip(text)
{
if (document.all&&document.readyState=="complete")
{
document.all.tooltip.innerHTML="<div vAlign=center><font SIZE=2>"+text+"</font></div>";
document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft+10;
document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
document.all.tooltip.style.visibility="visible";
}
}
function hidetip()
{
if (document.all)
document.all.tooltip.style.visibility="hidden";
}
</script>
</head>
<asp:DataList ID="DataList7" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<a onmouseover="showtip('Use Eval Here')" onmouseout="hidetip()">Header</a>
</HeaderTemplate>
</asp:DataList>
That is, onmouseover='<%# "showtip(" + Eval("fieldName") + ")"%>'
If you're using VB.NET, change '+' to '&'.
If your problem isn't solved, please inform us.
Regards
Allen Chen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
nisarkhan
Contributor
2402 Points
1472 Posts
Re: show tooltip in gridview
Aug 15, 2007 05:47 PM|LINK
error is:
ASP.NET runtime error: Code blocks are not supported in this
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
nisarkhan
Contributor
2402 Points
1472 Posts
Re: show tooltip in gridview
Aug 15, 2007 05:56 PM|LINK
here is the view source code
<input type="image" name="gvGLP$ctl03$btnEdit" id="gvGLP_ctl03_btnEdit" onmouseout="hidetip();" onmouseover="showtip(John Mark)" src="Images/details_icon.gif" style="border-width:0px;" />
i think the reason for the error is space between First name and Middle name
how do i put single quote to avoid the error?
again, i'm looking to have multiple Eval to show in the showtip?
thanks again.
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
Allen Chen –...
All-Star
40943 Points
4949 Posts
Re: show tooltip in gridview
Aug 16, 2007 02:13 AM|LINK
Hi:
In RowDataBound event handler, you can use e.Row.FindControl() method to find this control and use:
YourControl.Attributes.Add("onmouseover","YOUR JS HERE") method to add JavaScript.
Since it's in code behind you'll get more flexibility to control the string.
Regards
Allen Chen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
nisarkhan
Contributor
2402 Points
1472 Posts
Re: show tooltip in gridview
Aug 16, 2007 01:06 PM|LINK
thanks,
i'm looking to have multiple Eval to show in the showtip? is that possible in .aspx ? i understand about onmouseover from code-behind but just curious to know about multiple Eval
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.
soumen_ban
Member
71 Points
15 Posts
Re: show tooltip in gridview
Aug 16, 2007 02:34 PM|LINK
Hi,
You can always have multiple Eval functions. But you can not call any server method on any Javascript event it will give error.
Like onmouseover='<%# "showtip("'" + Eval("FirstLastName") + "'")"%>' will give error. Since you are trying to call Eval function (which is server side) on client side event.
Before call of the function only you have to make all the tooltip data ready.
In order to use multiple Eval to show the tooltip you can try this safe method:
in aspx page with control write this:
<asp:ImageButton ID="btnEdit" runat="server" ImageUrl="Images/details_icon.gif" CommandArgument='<%#Eval("_id")%>'
OnCommand="btnEditPerson_Click" ToolTip='<%#SetToolTip()%>' CausesValidation="false" />
in aspx.cs file add this method in the class:
protected string SetToolTip(){
return Eval("Tip1").ToString() + " " + Eval("Tip2").ToString() + " " + Eval("Tip3").ToString();}
Regards,
Soumen
Soumen :)
Please mark the reply as Answer to your query if it Closes your query.
nisarkhan
Contributor
2402 Points
1472 Posts
Re: show tooltip in gridview
Sep 06, 2007 01:04 PM|LINK
i have a offset problem i think,
when i scroll down the page and mouseover the icon to show the tooltip but whats happening is, the tooltip is showing all the way at very top of the page
how do i make sure the tooltip is next to mouseover (whatever the control i place?)
thanks.
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.