Question

在asp.net中，当用户将鼠标悬停在按钮上时，我想更改标签的文本以解释按钮的作用。

然后，当他们将鼠标移出按钮时，标签应该恢复为默认文本。

实现这一目标的最佳方法是什么？这有ASP.net控件吗？或者我应该只编写自定义JavaScript代码？

Answer 1

使用一点点jQuery魔术来改变标签文本真的很容易。

以下是您用于标签的内容

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

这就是你用于jQuery的内容

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


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

你可以test it here。

此外，如果您正在使用网络表单，您可以在代码后面或直接在控件中添加数据属性。在后面的代码中执行此操作适用于动态文本。

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

Answer 2

[编辑以回答您的问题]

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

然后：

$(".hover").hover(

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

[老帖子......哎呀，回答错误的问题]

使用类似jQuery Tools的工具提示插件非常适合这个东西！

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

只需将title属性添加到标签和一点JavaScript：

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

然后

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

Answer 3

你可以使用这个解决方案，我希望它会帮助你

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

将此与jQuery Tooltip插件（或类似）相结合，以获得更好的效果。

     myItemLabel.CssClass = "has-tooltip";

然后在你的标记中。

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

Answer 4

你可以用这个

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

如何在asp.net中鼠标悬停时更改标签文本

4 个答案: