asp.net hover over label

Question

I'm looking for ideas on what I was hoping to implement.

I had a asp label that I would like to set a max cap for the amount of visible characters in it (not a character limit on the total characters being inserted into the label but just for whats visible in the label). Then on a mouse hover I would like for it to display all the characters that were inserted into the label in some sort of hoverbox/popup.

The problem is I don't want users typing a novel and then it end up pushing the other elements around on my page.

Thanks.

Answer 1

The label control has a .TooTip property you can use for this.

Alternatively you'll have to write some javascript to show a "hidden" (display:none;) element for your label.

Answer 2

Setting the ToolTip property with the full text and the Text property to the actual displayed text via code behind is probably the best way to handle this.

 var item = db.Items.... (select the item to display)
 myItemLabel.Text = item.Name.Substring( 0, 10 );
 myItemLabel.ToolTip = item.Name;

Combine this with the jQuery Tooltip plugin (or similar) to get better effects.

 myItemLabel.CssClass = "has-tooltip";

Then in your mark up.

 <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
 <script type="text/javascript">
 $(function() {
     $('.has-tooltip').tooltip();
 });
 </script>