5

我有一个具有标题属性的 div 按钮，我们将其用作使用 jQueryUI 的工具提示的文本。我想通过单击来更改按钮的工具提示。但是，当单击按钮并触发回调函数时，鼠标悬停在 div 上并且标题为空。

我该如何解决这种行为？看起来 jQueryUI Tooltip 小部件在悬停时删除了标题并将其放回鼠标上。

$( document ).tooltip();
$(".btn").click(function(){
    alert($(this).attr("title")); // Expect to see T1 or T2 but shows blank
    if ($(this).attr("title")=="T1"){
        $(this).attr("title","T2")
    }else{
        $(this).attr("title","T1")
    }
});

直播：http: //jsfiddle.net/lordloh/ckTjA/

如果没有 jQueryUI 工具提示小部件，事情似乎工作正常：http: //jsfiddle.net/lordloh/ckTjA/1/

此外，我将工具提示小部件应用于$(document). 所以我不能使用$(this).tooltip("option","content")，因为工具提示没有$(this)明确应用。这会导致控制台上出现 Javascript 错误。

2013-02-18：截至目前，我正在运行$(document).tooltip("destroy");，更改标题属性和$(document).tooltip();. 不是一个优雅的解决方案:-(我正在寻找不是黑客的东西。

4

3 回答 3

4

小部件从属性中删除文本title以防止出现本机浏览器工具提示。当它删除文本时，它将其存储在附加到元素的数据中。

您可以使用这行代码执行相同的操作：

$("#my-element").data("ui-tooltip-title", "My new tooltip message");

现在，如果用户将鼠标从元素上移开，然后将鼠标悬停在其上，它将显示新文本。

要立即显示新文本，您需要更新实时工具提示覆盖元素，幸好很容易找到。您只需要在更新文本后执行此操作：

$(".ui-tooltip-content").html($("#my-element").data("ui-tooltip-title"));

在 jQuery UI 1.10.0 上测试。

于 2013-02-28T16:15:47.377 回答
2

使用工具提示小部件时，您可以通过其自己的 API 更新内容：

    $(this).tooltip('option', 'content', "New Content Goes Here");
于 2013-02-17T22:37:49.743 回答
0

试试这个：





  
$('document').ready(function() { $('document').tooltip();
  $(".btn").click(函数(){
      alert($(this).attr("title"));
      if ($(this).attr("title")=="T1"){
          $(this).attr("title","T2");
      }别的{
          $(this).attr("title","T1");
      }
    });
  });
$( 'document' ) 应该用单引号或双引号（' 或 "） 并且它对我来说很好用$( 'document' ).tooltip() ;

于 2013-10-30T09:46:41.767 回答