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?

Answer 1

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");