How to change label text on mouseover in asp.net

Question

In asp.net, when the user mouses over a button, I'd like to change the text of a label to explain what the button does.

Then when they mouse-out of the button, the label should go back to its default text.

What is the best way to achieve this? Are there ASP.net controls for this? Or should I just code custom javascript?

Solution

Changing the label text using a little jQuery magic is really quite easy.

Here's what you'd use for your label

<label id="mylabel" 
       title="My Text" 
       data-replace="My NEW Text">My Text</label>

and here's what you'd use for your jQuery

$("#mylabel").mouseover(function () {
  $(this).text($(this).data('replace'));
});


$("#mylabel").mouseout(function () {
  $(this).text($(this).attr('title'));
});

You can test it here.

Also, if you're using web forms, you can either add the data attribute in your code behind or directly in the control. Doing it in the code behind is good for dynamic text.

mylabel.Attributes.Add("data-original", "My Text");
mylabel.Attributes.Add("data-replace", "My NEW Text");

Comments

[Chase Florell]

Using a tooltip is a good option over changing the actual text of the label, however @kaes did ask to change the text of the label. You would be wise to give a jQuery example on how to do that as well in order to actually "answer" the question.

[Chase Florell]

Your answer is the same as @Watermark-Studios answer, unfortunately it doesn't actually answer how to change the label text.