Question

我正在尝试创建自定义工具提示插件，仅用于学习目的。当我在自定义属性（例如＆＃34; 工具提示＆＃34;）中使用工具提示文本时，每件事情都运行正常，但是如果是＆＃34; 标题＆＃ 34;我无法隐藏/禁用浏览器默认标题工具提示。

HTML：

<p id="p1" title="tooltip 1">Go</a>">
    This is a paragraph
</p>

<p id="p2" title="tooltip 2">
    This is another paragraph
</p>

JQuery的：

$("p").tooltip({
    autoClose: false,
    color: "white   ",
    backgroundColor: "grey",
});

Working Fiddle

Answer 1

在您提供的JSFiddle中，您有以下代码

var tooltipContent =  $(this).attr('data-ttl');
var newElem = '<span class="tooltip">'+ tooltipContent +'</span>';

而不是添加标题，尝试在P标记中添加以下数据属性

<p id="p1" data-title="tooltip 1">Go</a>">
    This is a paragraph
</p>

<p id="p2" data-title="tooltip 2">
    This is another paragraph
</p>

并将代码更改为以下

var tooltipContent =  $(this).data('data-title');
var newElem = '<span class="tooltip">'+ tooltipContent +'</span>';

请查找更新的JS Fiddle

修改

如果您检查实际的jQuery UI工具提示，则不会显示默认的浏览器工具提示。 jQuery UI Tooltip

原因是，如果您在开发人员工具窗口中检查HTML，您可以看到库本身删除了mouseenter上“title”属性中的内容，并在mouseout上再次重置它。看着你的小提琴后，似乎你正在添加自己的逻辑来显示和隐藏工具提示。好吧，如果您添加自定义逻辑，您必须处理所有情况。执行以下步骤以获得与默认jQuery工具提示相同的行为。


在创建工具提示和显示时（在鼠标输入时）删除“title”属性中的内容。

将该内容存储在标记的“data”属性中。

当用户从控件中移出鼠标时，将内容再次重置为“title”属性。

请向此JS小提琴咨询您的问题的解决方案。我已修改您的工具提示点击事件以恢复标题内容

Updated JS Fiddle

Answer 2

您无法禁用自定义浏览器工具提示（您可以使用javascript而不是默认方式）。但是你可以使用这个技巧：

<p id="p1" data-title="tooltip 1">
    This is a paragraph
</p>

在jquery上你可以从data-title获得变量：

var tooltipContent =  $(this).attr('data-title');

如何使用jquery隐藏/禁用浏览器默认标题工具提示

2 个答案: