Как изменить текст метки при наведении курсора в asp.net

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'));
});

Вы можете проверить это здесь .

Кроме того, , если вы используете веб-формы, вы можете добавить атрибут данных в свой код или непосредственно в элемент управления. Делать это в коде хорошо для динамического текста.

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

Answer 2

Вы можете использовать это

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

[Изменить, чтобы ответить на ваш вопрос]

<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 Tooltip отлично подходит для этой вещи!

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