我正在使用这个great tooltip,它在悬停时显示工具提示(带有.tooltip函数的锚元素的标题)。这一次,我希望它在点击时显示,所以我这样做了: -
$(document).ready(function(){
$(".icons a.tooltips").click(function() {
return $($(this).attr("href")).html().easyTooltip();
// Prevent the browser jump to the link anchor
e.preventDefault();
});
});
这个html如下:
<div class="foo">
<a class="bar" title="Lorem ipsum" href="#"></a>
<a class="bar" title="meaningless text" href="#"></a>
<a class="bar" title="more meaningless text" href="#"></a>
<a class="bar" title="even more meaningless text" href="#"></a>
</div>
答案 0 :(得分:2)
默认情况下,easyTooltip使用悬停事件来确定是显示还是隐藏工具提示。只能通过插件的源来更改此行为。幸运的是,结果非常简单,因为您可以在下面的演示中看到。我所做的基本上是将工具提示触发器从悬停更改为单击,同时保持其余的行为(和代码)与以前完全相同。
在演示中,插件代码也是嵌入式的。请注意我添加的注释,以指出插件代码中的更改。
答案 1 :(得分:1)
只有启动工具提示才需要easytooltip功能。你只需要调用一次这个函数。
$(document).ready(function(){
$("foo a.bar").easyTooltip();
});
这将显示鼠标悬停的工具提示。
如果您想将其更改为仅在点击时触发,您必须修改此插件的脚本或找到另一个。
示例jquery插件,允许您指定jquery事件以显示工具提示:http://craigsworks.com/projects/qtip/docs/reference/#show