7 回答
问题是尽管您可以{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
您可以使用以下方式使用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>";
}
}
});
});
您可以从目标元素中的标准或自定义 (data-) 属性中提取内容,如下所示:
$(document).tooltip({ items: "a[data-title]" },
{content: function(){
return $(this).attr("data-title");
}
});
这里的 'content' 选项被定义为一个返回 data-title 属性值的函数。使用函数返回工具提示内容的情况还有很多,例如它可以返回 AJAX 调用的结果或其他动态内容。
如果您想在工具提示中包含格式化的 HTML,content:function 可以检索页面上隐藏 div 的内部 HTML。
您可以使用 twitter bootstrap 作为工具提示。网上有很多可扩展的插件。
你可以试试 twitter bootstrap popover,也可以自定义css。
看看它。
这有点 hacky 但是当items
对你不起作用时(假设你同时为多个选择器做)你也可以动态设置标题:
$(el).attr('title', '')
.tooltip({
content: //...
position: //...
});
标题是 HTML 标签的一个属性。您可以根据需要自定义库。
您可以定义不同的属性而不是标题,然后用作工具提示。
例如
<div tooltip_text="hello world!"> ... </div>