2

我正在使用这个很棒的工具提示，它在悬停时显示工具提示（带有 .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>
4

2 回答 2

2

默认情况下，easyTooltip 使用悬停事件来确定是显示还是隐藏工具提示。此行为只能通过插件的源来更改。幸运的是，正如您可以在下面的演示中看到的那样，这非常简单。我所做的基本上是将工具提示触发器从悬停更改为单击，同时保持其余行为（和代码）与以前完全相同。

在演示中，插件代码也被嵌入。请注意我添加的注释以指出插件代码中的更改。

更新演示：http: //jsfiddle.net/techfoobar/FhLLA/2/

于 2012-07-20T11:59:48.560 回答
1

easytooltip 函数只需要启动工具提示。您只需调用此函数一次。

$(document).ready(function(){   
    $("foo a.bar").easyTooltip();
});

这将在鼠标悬停时显示工具提示。

如果您想将其更改为仅在单击时触发，则必须修改此插件的脚本或找到另一个脚本。

示例 jquery 插件将允许您指定 jquery 事件以显示您的工具提示：http: //craigsworks.com/projects/qtip/docs/reference/#show

于 2012-07-20T11:39:46.773 回答