不使用 <title> 属性的 jQuery 工具提示

Posted 2023-05-09

技术标签:

【中文标题】不使用 <title> 属性的 jQuery 工具提示【英文标题】：jQuery Tooltip that doesn't use the <title> attribute 【发布时间】：2013-06-07 00:04:21 【问题描述】：

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

我需要能够在包含块中使用其他<html> 标签，例如<p> 等，因此需要不使用<title>。使用<div> 或类似的插件将是完美的，因为我可以自定义我想要的方式并使用相关的<html> 标签。

我已经搜索了又搜索了，但找不到任何东西，所以如果有人知道，我将不胜感激！

【问题讨论】：

你可以简单地改变插件拉取数据的方式——而不是从title属性拉取文本，你可以让它在目标元素中搜索特定的div，甚至从定制的HTML5数据中拉取数据- 属性。您必须深入研究源代码才能进行更改。 jQuery UI 的tooltip widget 可以显示任意内容并支持Internet Explorer 6、7和8。 【参考方案1】：

您可以使用jQuery Tooltip 不带标题的custom-content，例如：

$(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

【讨论】：

谢谢，我会看看这个。这向后兼容吗？我担心的是我使用的是 jQuery 版本 1.5.1（不是我的选择）。我可以更新 jQuery 的版本，但我需要确保任何组件都支持 IE8。 @Kiz 你可以使用jQuery Migrate Plugin 来实现这一点.. 谢谢，最终编辑tooltipster，但根据您的回答更改内容！【参考方案2】：

问题在于，尽管您可以为工具提示指定 content:''，但它需要一个标题标签，或者您指定一个备用标签以供它使用，即使它不会使用属性值。

但是，您为items:'selector' 传递的值是一个选择器。默认情况下它是 items:'[title]'。与其将选择器设置为属性，不如将其设置为正在应用的标签的名称。在您的情况下，坦率地说，在大多数情况下，任何人都会手动设置工具提示，您可以使用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

【讨论】：

【参考方案3】：

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

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

【讨论】：

【参考方案4】：

您可以从目标元素中的标准或自定义 (data-) 属性中提取内容，如下所示：

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

);

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

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

【讨论】：

【参考方案5】：

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

看看吧。

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

【讨论】：

【参考方案6】：

这有点老套，但是当items 不适合你时（假设你同时为多个选择器做）你也可以动态设置标题：

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

【讨论】：

【参考方案7】：

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

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

例如

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

【讨论】：

那是无效的 HTML。您需要使用 data- 属性，例如data-tooltip-text

以上是关于不使用 <title> 属性的 jQuery 工具提示的主要内容，如果未能解决你的问题，请参考以下文章

不使用 <title> 属性的 jQuery 工具提示