How to change label text on mouseover in asp.net

In asp.net, when the user mouses over a button, I'd like to chan开发者_运维技巧ge 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?

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

[Edit to answer your question]

<asp:label id="label1" class="hover" data-replace="The tooltip text #1" data-original="Original Value" runat="server">Original Value</asp:label>

Then:

$(".hover").hover(

function() {
    var text = $(this).attr("data-replace");
    $(this).text(text);
}, function() {
    var text = $(this).attr("data-original");
    $(this).text(text);
}
);

[Old post...oops, answered wrong question]

Using something like jQuery Tools Tooltip plugin is great for this stuff!

http://flowplayer.org/tools/demos/tooltip/index.html

Just add title attribute to your label and a little JavaScript:

<asp:label id="label1" title="The tooltip text #1" runat="server"></asp:label>

Then

$("#label1").tooltip();

you can use this solution , I hope it will helps you

   myItemLabel.ToolTip = "Text you want to show when hover";

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>

you can use this

<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>