DataList Row ToolTip

[rn5a]

A DataList displays 3 columns - Product, Category & Price. These
columns are populated with records from a SQL Server 2005 DB table.
Apart from the above 3 DB columns that the resultset retrieves, there
is another DB column named 'Description'. Though the resultset fetches
this column as well along with the above 3 columns, I am excluding the
Description column from the DataList - the reason being most of the
descriptions are pretty long & this may drastically increase the width
of the entire DataList which I would like to avoid. I don't prefer
wrapping any column text in the DataList as well.

This is why I want that when a user hovers his mouse over one
particular row in the DataList, that row should display a ToolTip for
the DB record it houses & the ToolTip should show the description of
that particular record.

For e.g. if one of the DB records under the DB columns 'Product',
'Category', 'Price', 'Description' is 'Lancer', 'Car', '25000', 'This
car is blah...blah...blah...blah...blah....' respectively, then one of
the rows in the DataList would be

Lancer Car 25000

Now when a user hovers his mouse over this row in the DataList, a
ToolTip stating 'This car is blah...blah...blah...blah...blah....'
should come up.

In other words, hovering the mouse over different rows in the DataList
should show different ToolTips (which should be the corresponding
description). How do I do this?

[jbfranks]

I am not sure on hovering over a row I have tried this with the ToolTip
on the datalist item but it didn't work. If you add a control you can
do it like this... Add a label to the datalist row and have it contain
the text you want in the tooltip, then set visible=false on that label.
then do this...

//Loop through the datalist
foreach (DataListItem dl in DataList1.Items)
{
//FIND THE CONTROL YOU WANT TO HOVER OVER
Label lbl = (Label)dl.FindControl("user_firstnameLabel");

//FIND THE INVISIBLE CONTROL WITH THE TOOLTIP INFO
Label lblEmail = (Label)dl.FindControl("user_emailLabel");

//SET THE TOOLTIP TO THE TOOLTIP INFO
lbl.ToolTip = lblEmail.Text;
}

This is a simple DL that shows a label with a first name and then when
it is hovered over it shows the email address of the individual.

Hope this helps!

-Jason

[Leon Mayne]

"jb******@gmail.com" wrote:

I am not sure on hovering over a row I have tried this with the ToolTip
on the datalist item but it didn't work.

You could use the title attribute of the table row, e.g.
<tr title="Long description of record">
<td>Product Name</td>
<td>Product Category</td>
<td>Price</td>
</tr>

[rn5a]

Jason, I found a far simpler way to display the ToolTip when the mouse
hovers over any row in a DataList. Earlier, I was populating the
<ItemTemplate/in the DataList using Literal controls in this way:

<asp:DataList ID="dlCart" runat="server">
<HeaderTemplate>
<table border="2" width="100%">
<tr>
<th>PRODUCT</th>
<th>CATEGORY</th>
<th>PRICE</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Container.DataItem("Product") %></td>
<td><%# Container.DataItem("Category") %></td>
<td><%# Container.DataItem("Price") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>

To make the ToolTips appear, I replaced the Literal controls with Label
controls within the <ItemTemplate/>

<ItemTemplate>
<tr>
<td>
<asp:Label ID="lbl1" Text='<%# Container.DataItem("Product") %>'
ToolTip='<%# Container.DataItem("Description") %>' Width="100%"
runat="server"/>
</td>
<td>
<asp:Label ID="lbl2" Text='<%# Container.DataItem("Category") %>'
ToolTip='<%# Container.DataItem("Description") %>' Width="100%"
runat="server"/>
</td>
<td>
<asp:Label ID="lbl3" Text='<%# Container.DataItem("Price") %>'
ToolTip='<%# Container.DataItem("Description") %>' Width="100%"
runat="server"/>
</td>
</tr>
</ItemTemplate>

Often it happens that the width of a <tdturns out to be larger than
the length of the text (in this case, width of the Label) due to which
only a part of the <tdhouses the text & the remaining part of the
<tdremains empty (without any text). Setting the "Width" property of
the Labels to 100% ensures that the ToolTips would appear irrespective
of where the mouse hovers over a particular <td>. Avoiding it will make
the ToolTip appear only when the mouse hovers over the Label control
(or the text) in a particular <tdbut not when the mouse hovers over
any empty space within a <td>.

In short, let the mouse hover over any region in a row - the ToolTip
will always appear.

That's it!

The suggestion you had given to display the ToolTips - I doubt whether
it will work because when I tried it out (using Label controls), the
ToolTips appeared only when the Labels' Visible property was set to
True. The ToolTips didn't appear when the Labels' Visible property was
set to False. Have you tried it out?
jb******@gmail.com wrote:

I am not sure on hovering over a row I have tried this with the ToolTip
on the datalist item but it didn't work. If you add a control you can
do it like this... Add a label to the datalist row and have it contain
the text you want in the tooltip, then set visible=false on that label.
then do this...

//Loop through the datalist
foreach (DataListItem dl in DataList1.Items)
{
//FIND THE CONTROL YOU WANT TO HOVER OVER
Label lbl = (Label)dl.FindControl("user_firstnameLabel");

//FIND THE INVISIBLE CONTROL WITH THE TOOLTIP INFO
Label lblEmail = (Label)dl.FindControl("user_emailLabel");

//SET THE TOOLTIP TO THE TOOLTIP INFO
lbl.ToolTip = lblEmail.Text;
}

This is a simple DL that shows a label with a first name and then when
it is hovered over it shows the email address of the individual.

Hope this helps!

-Jason

[dotnet_coder]

Yes, it worked. The Visible = false would be on the label with the
tooltip text not the one you would hover over..

Your solutions looks better anyway.

Thanks!

Jason
rn**@rediffmail.com wrote:

Jason, I found a far simpler way to display the ToolTip when the mouse
hovers over any row in a DataList. Earlier, I was populating the
<ItemTemplate/in the DataList using Literal controls in this way:

<asp:DataList ID="dlCart" runat="server">
<HeaderTemplate>
<table border="2" width="100%">
<tr>
<th>PRODUCT</th>
<th>CATEGORY</th>
<th>PRICE</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Container.DataItem("Product") %></td>
<td><%# Container.DataItem("Category") %></td>
<td><%# Container.DataItem("Price") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>

To make the ToolTips appear, I replaced the Literal controls with Label
controls within the <ItemTemplate/>

<ItemTemplate>
<tr>
<td>
<asp:Label ID="lbl1" Text='<%# Container.DataItem("Product") %>'
ToolTip='<%# Container.DataItem("Description") %>' Width="100%"
runat="server"/>
</td>
<td>
<asp:Label ID="lbl2" Text='<%# Container.DataItem("Category") %>'
ToolTip='<%# Container.DataItem("Description") %>' Width="100%"
runat="server"/>
</td>
<td>
<asp:Label ID="lbl3" Text='<%# Container.DataItem("Price") %>'
ToolTip='<%# Container.DataItem("Description") %>' Width="100%"
runat="server"/>
</td>
</tr>
</ItemTemplate>

Often it happens that the width of a <tdturns out to be larger than
the length of the text (in this case, width of the Label) due to which
only a part of the <tdhouses the text & the remaining part of the
<tdremains empty (without any text). Setting the "Width" property of
the Labels to 100% ensures that the ToolTips would appear irrespective
of where the mouse hovers over a particular <td>. Avoiding it will make
the ToolTip appear only when the mouse hovers over the Label control
(or the text) in a particular <tdbut not when the mouse hovers over
any empty space within a <td>.

In short, let the mouse hover over any region in a row - the ToolTip
will always appear.

That's it!

The suggestion you had given to display the ToolTips - I doubt whether
it will work because when I tried it out (using Label controls), the
ToolTips appeared only when the Labels' Visible property was set to
True. The ToolTips didn't appear when the Labels' Visible property was
set to False. Have you tried it out?
jb******@gmail.com wrote:

I am not sure on hovering over a row I have tried this with the ToolTip
on the datalist item but it didn't work. If you add a control you can
do it like this... Add a label to the datalist row and have it contain
the text you want in the tooltip, then set visible=false on that label.
then do this...

//Loop through the datalist
foreach (DataListItem dl in DataList1.Items)
{
//FIND THE CONTROL YOU WANT TO HOVER OVER
Label lbl = (Label)dl.FindControl("user_firstnameLabel");

//FIND THE INVISIBLE CONTROL WITH THE TOOLTIP INFO
Label lblEmail = (Label)dl.FindControl("user_emailLabel");

//SET THE TOOLTIP TO THE TOOLTIP INFO
lbl.ToolTip = lblEmail.Text;
}

This is a simple DL that shows a label with a first name and then when
it is hovered over it shows the email address of the individual.

Hope this helps!

-Jason