• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2402
  • Last Modified:

How to have tooltip for repeater control row?

I have a repeater control with 2 columns. ID and NAME are column headers.
I directly binded the datatable to my repeater control. I have another column in my datatable DESCRIPTION which I am not displaying in my repeater control. But I want to display it like a tooltip. i.e If I have my cursor on row1, it should display/hover the DESCRIPTION related to that ID. How do I do this?
0
ASPNet_Developer
Asked:
ASPNet_Developer
1 Solution
 
Rahul AgarwalTeam LeaderCommented:
0
 
CodeCruiserCommented:
0
 
ASPNet_DeveloperAuthor Commented:
I need little help, below is my code

<asp:Repeater ID="repeater1" runat="server">
<HeaderTemplate>
<table width="100%">
<tr align="center">
<td>ID</td>
<td>Name</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "ID")%>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "NAME")%>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "ID")%>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "NAME")%>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

ASPX.VB-CODE
-----------------------
If myDataSet.Tables(0).Rows.Count > 0 Then
repeater1.DataSource = myDataSet.Tables(0)
repeater1.DataBind()
End If

---------------------------------------

where do I modified the code?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ASPNet_DeveloperAuthor Commented:
My dataset has one more column DESCRIPTION which I want to hover on the rows of the repeater control.
0
 
Tom BeckCommented:
What if you just did this:

<ItemTemplate>
<tr>
<td title='<%# DataBinder.Eval(Container.DataItem, "DESCRIPTION")%>'>
<%# DataBinder.Eval(Container.DataItem, "ID")%>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "NAME")%>
</td>
</tr>
</ItemTemplate>
0
 
Kamal KhaleefaInformation Security SpecialistCommented:
hi
you can simply use a label and replace the following

<%# DataBinder.Eval(Container.DataItem, "NAME")%>

by
<asp:label id="myid" runtat="server" text='<%# DataBinder.Eval(Container.DataItem, "NAME")%>'
tooltip='<%# DataBinder.Eval(Container.DataItem, "Description")%>'
></asp:label>
0
 
game-masterCommented:

Hi good morning!

You can use the Title property of the div or td to display the description as a tooltip.
When the page is loaded the Title property of the div or TD will became a TOOLTIP.

something like this..

//this will become the TOOLTIP.
<div title = '<%# DataBinder.Eval(Container.DataItem, "Description")%>'>
 
    // your actual code that display item on the repeater.
   <%# DataBinder.Eval(Container.DataItem, "ID")%>

</div>


i hope i can give u some idea..


best regards,

Alvin.
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hi, you can use the approaches posted here to display a system tool tip when the mouse is over your ID value by using the td title attribute, also I recommend to sanitize all the text that you are binding by using the Server.EncodeHtml method, like the next example:
<asp:Repeater ID="repeater1" runat="server">
    <HeaderTemplate>
        <table width="100%">
            <tr align="center">
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td title="<%# Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "DESCRIPTION").ToString()) %>">
                <%# Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "ID").ToString()) %>
            </td>
            <td>
                <%# Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "NAME").ToString()) %>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr>
            <td title="<%# Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "DESCRIPTION").ToString()) %>">
                <%# Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "ID").ToString()) %>
            </td>
            <td>
                <%# Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "NAME").ToString())%>
            </td>
        </tr>
    </AlternatingItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Open in new window


The Server.HtmlEncode method will convert any html tag representation into it html literal, this will protect you against XSS attacks.
0
 
ASPNet_DeveloperAuthor Commented:
Thanks for all your help. I am using the label in the repeater control  suggested by"king2002".
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now