JQuery提示框未显示

Question

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

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

谢谢 :)

- Ryan Taylor

---

在这种情况下，您应该尝试使用类而不是ID。有效的HTML不允许元素具有重复的ID。 - Ryan

同时，你的提示框是一个类，而你正在引用一个ID $('.tooltip').....。 - romo

就像“romo”所提到的那样，您的代码应该是这样的：function showTooltip() { $(".tooltip").each(function() { $(this).tooltip(); }); }; - Kickass

Answer 1

如果您也遇到工具提示无法正常使用的问题，我发现了一些关于jquery-ui的问题。似乎他们没有处理默认项目内容为空的情况。

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

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

我认为不处理空（或未定义）值是相当薄弱的，但事实就是如此。

我通过向元素添加类似以下内容的title属性来处理它：

title=''

我猜你可以在工具提示构造函数中指定一个items，像这样：

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

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

other-title=''

PS：使用JQuery-UI 1.11.4

- Kickass

---

那是一个狡猾的人/事件。 - user151496

非常令人失望。如果他们有一个“content”选项用于设置内容，那么我为什么仍然需要在HTML中使用“title”呢？ - Fomentia

JQuery-UI对我来说已经不再是问题了，因为我不再在任何地方使用它。例如，如果我需要一个对话框，我会从头开始创建它。 - Kickass

谢谢！我还需要一个空的标题属性来显示。 - jMike

非常好的回复。我完全同意不处理空标题！这帮助我解决了几个浪费的小时。 - Morey

Answer 2

尝试使用：

JS：

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

只要在代码中有 title="你的标题"，当你悬停在上面时，它就会有一个jQuery提示框。

示例

- Joe Pigott

Answer 3

你的函数必须有一个类选择器：$（“.class”）... 而不是 $（“#id”）

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

- Tiago B

---

糟糕！我相信这就是答案，但我仍然无法让它显示出来。 - Ryan Taylor

你在文档准备好时调用了那个函数吗？JQueryUI.com上的示例是在文档准备好时调用它的... 并确保导入jQuery.js、jquery-ui.js和jquery-ui.css。 - Tiago B

它之前不在document.ready里，但现在已经加进去了。它仍然没有显示出来，可能失去了焦点。我不知道... 在API文档中看起来如此简单，但这真是令人沮丧！ - Ryan Taylor

您可以在 tooltip 功能中使用 class 或 id 选择器。 - juju

Answer 4

在我的情况下，问题出现是因为页面上同时加载了Bootstrap。

- Moshe Fortgang

Answer 5

当我使用 $(document).tooltip(); 时，它会为每个元素创建工具提示，为了获取特定的工具提示，我使用了：

    $(function () {
      $(document).tooltip({
          track: true, 
          items: ".tooltip",
          content: function () {
              return $(this).attr("title");
          }
      });
  });

- neodonator

---

仅仅使用 $(document).tooltip(); 对我来说不起作用。我必须对需要添加项目的特定元素进行操作："#id"，以便获取特定的效果，所以我想分享一下。 - neodonator

Answer 6

假设我想在输入框上显示一个工具提示，我可以使用HTML属性"title"来实现：

`<input type="text" id="an_id" style="width: 120px" title='Tooltip on an_id'>`

将鼠标指针悬停在元素上，会显示包含在标题标签中的消息作为工具提示。

同样，也可以使用jQuery在HTML表格的单元格（'TD'）上添加属性"title"来添加工具提示。

一个使用案例可能是在HTML表格中显示在单元格内的多个输入：

$(function() {
    $(document).on('mouseover', '#my_table td', function() {
        $("#input1").attr('title', 'Tooltip 1 using jQuery');
        $("#input2").attr('title', 'Tooltip 2 using jQuery');
    });
});

我们还可以通过其他方式进一步扩展功能，例如动态添加表格行。

- carla

Answer 7

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

$(document).tooltip();

但是有时候这样做仅靠它自身是行不通的。以下是无法正常工作的特定情况：

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

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

- HoldOffHunger