Question

我有div按钮，它有一个title属性，我们用它作为使用jQueryUI的工具提示的文本。我想通过点击它来更改按钮的工具提示。但是，单击该按钮并触发回调函数时，鼠标位于div上，标题为null。

如何修复此行为？看起来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 Tooltip小部件，事情似乎工作正常：http://jsfiddle.net/lordloh/ckTjA/1/

此外，我在$(document)上应用了工具提示小部件。因此我无法使用$(this).tooltip("option","content")，因为工具提示未明确应用于$(this)。这会导致控制台出现Javascript错误。

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

Answer 1

小部件从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上测试。}

Answer 2

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

    $(this).tooltip('option', 'content', "New Content Goes Here");

Answer 3

试试这个：




  $('document').ready(function() { $( 'document' ).tooltip();
  $(".btn").click(function(){
      alert($(this).attr("title"));
      if ($(this).attr("title")=="T1"){
          $(this).attr("title","T2"); 
      }else{
          $(this).attr("title","T1");
      } 
    }); 
  });

$（'document'）应该是单引号或双引号（'或'），对我来说正常 whitout $（'文件' ）.tooltip（）;

在鼠标悬停在元素上时使用jQuery更改title属性

3 个答案: