10

我正在尝试使用 jquery ui 为一些列出的元素设置工具提示，但我无法显示工具提示。我正在尝试使用工具提示类将工具提示应用于所有项目。请检查我的代码是否有问题...

HTML

<li>
<label>
  <input id="someid" type="radio" name="name" />
  <strong><span>text</span></strong></label>
  <a href="#" class="tooltip" title="some text"></a>
  <h4>text</h4>
</li>

JS

function showTooltip() {
$("#tooltip").each(function()
    {
        $(this).tooltip();
    };
};

谢谢 ：）

4

6 回答 6

22

对于其他任何因工具提示无法正常工作而苦苦挣扎的人。

我最近发现了 jquery-ui 的一些问题，但似乎他们没有处理默认项目内容的空输入。

因此，默认情况下它是“标题”，因此如果您没有为要制作工具提示对象的元素输入标题属性，即使您像这样指定内容，它也会失败：

$("#element").tooltip({content:"test"});

在我看来，不处理空（或未定义）值是很弱的，但事实就是这样。

我通过向元素添加这样的标题属性来处理它：

title=''

items我想您可以像这样在工具提示构造函数中指定 a ：

$("#selector").tooltip({items:'other-title', content: 'test'});

但是你仍然需要像这样将新属性添加到元素中：

other-title=''

PS：使用 JQuery-UI 1.11.4

于 2017-01-21T18:17:13.200 回答
6

尝试使用：

JS：

$(document).ready(function(){
    $(document).tooltip();
});

因此，title="yourtitle"当您将鼠标悬停在其中时，其中的所有内容都会有一个 jquery 工具提示。

例子

于 2013-07-10T23:03:52.313 回答
2

您的函数必须有一个类选择器： $(".class")... 而不是 $("#id")

$(function(){
    showTooltip();
    function showTooltip() {
       $(".tooltip").each(function() {
           $(this).tooltip();
       });
    }
});
于 2013-03-20T20:43:53.427 回答
0

就我而言，出现问题是因为页面上也加载了 Bootstrap。

于 2022-01-31T10:42:58.283 回答
0

就像其他人所说的那样，您只需要以下内容：

$(document).tooltip();

但也有例外，仅此一项是行不通的。这不起作用的特定情况：

  • option块内的元素select。（工具提示显示在选择选项下方）
  • disabled="true"元素将继续以非 jQuery-UI 格式显示工具提示，直到重新启用。

除了重新编程 jQuery-UI 之外，我还没有找到真正解决这些问题的方法。

于 2018-03-23T19:05:38.750 回答
0

当我使用 $(document).tooltip(); ，它为每个元素制作了工具提示，以获取我使用的特定工具提示， 

    $(function () {
      $(document).tooltip({
          track: true, 
          items: ".tooltip",
          content: function () {
              return $(this).attr("title");
          }
      });
  });
于 2016-11-17T14:17:32.870 回答