Question

我正在寻找一个不使用<title>属性的jQuery工具提示插件。到目前为止，我尝试了一些变化，包括; Tooltipster，PowerTip，jTip和TipTip！它们都有效，但在IE8中都不能正常工作（这是必须的）。它们也都使用<title>属性。

我需要能够在包含块中使用其他<html>标记，例如<p>等，因此需要不使用<title>。使用<div>或类似内容的插件非常完美，因为我可以根据自己的需要进行自定义并使用相关的<html>标记。

我搜索，搜索和搜索但找不到任何东西，所以如果有人知道，我会非常感激！

Answer 1

您可以使用custom-content使用jQuery Tooltip无标题，如：

$(function () {
    var content = 'We ask for your age only for statistical purposes.';
    $(document).tooltip({
        items: "input",
        content: function () {
            var element = $(this);
            if (element.is("input")) {
                return "<p class='arrow'>" + content + "</p>";
            }
        }
    });
});

FIDDLE DEMO

Answer 2

问题是，虽然您可以为工具提示指定{content:''}，但它需要标题标记，或者您指定要使用的备用标记，即使它不使用属性值。

但是，您传递给{items:'selector'}的值是一个选择器。默认情况下，它是{items：＆＃39; [title]＆＃39;}。它不是将选择器设置为属性，而是将其设置为应用它的标记的名称。在你的情况下，坦率地说，在大多数情况下，任何人都会手动设置工具提示，你可以使用{items:'*'}这是一个外卡选择器，可以用于任何元素。

标记：

<p class="example">
  Joke Part One.
</p>

脚本：

$('.example').tooltip({
  content: 'This will be your working tooltip',
  items:'*'
});

示例：http://jsbin.com/depax/5/edit?html,js,output

Answer 3

您可以使用twitter bootstrap作为工具提示。网上有很多可扩展的插件。

http://twitter.github.com/bootstrap/javascript.html

Answer 4

你可以试试twitter bootstrap popover，你可以自定义css。

看看它。

http://twitter.github.io/bootstrap/javascript.html#popovers

Answer 5

您可以从目标元素中的标准或自定义（数据）属性中提取内容，如下所示：

$(document).tooltip({ items: "a[data-title]" },
{content: function(){
return $(this).attr("data-title");
}
});

这里'content'选项被定义为一个返回data-title属性值的函数。使用函数返回工具提示的内容有很多种情况，例如：它可以返回AJAX调用或其他动态内容的结果。

如果您想在工具提示中包含格式化HTML，则content：函数可以检索页面上隐藏div的内部HTML。

Answer 6

这有点hacky但是当items对你不起作用时（假设你一次为多个选择器做）你也可以动态设置标题：

$(el).attr('title', '')
     .tooltip({
          content: //...
          position: //...
      });

Answer 7

标题是HTML标记的属性。您可以根据需要自定义库。

您可以定义不同的属性而不是标题，然后将其用作工具提示。

e.g。

<div tooltip_text="hello world!"> ... </div>

jQuery Tooltip，它不使用<title>属性</title>

7 个答案: