jQuery clueTip:鼠标悬停时显示/隐藏，单击时粘滞

Question

我结合使用cluetip插件和jQuery FullCalendar来显示事件的详细信息，效果非常好。我想在每个描述中有一个链接，用户可以点击。但我不想让用户必须点击每个事件才能显示信息。

有没有什么选项可以让我在鼠标悬停时显示clueTip，在鼠标移出时隐藏它，但在点击时使它变得粘滞？我还没有找到，但我猜这会使行为变得非常直观。

Answer 1

我终于找到了一个有效的方法来解决我的问题--通过创建2个线索提示…“mouseout”解决方案没有按预期工作:-/

var stickyTooltip = false;
var tooltipClass;
// ...
$(eventElement).attr('title', event.title+'\n'+info).cluetip({
    splitTitle: '\n',
    sticky: true,
    activation: 'click',
    closeText: 'Close',
    onShow: function(ct, c) {
        stickyTooltip = true;
        $('#clickInfo').hide(); // #clickInfo is a span that tells user how to fix tooltips
        tooltipClass = $(ct).attr('class');
    },
    onHide: function(ct, ci) {
        stickyTooltip = false;
    }
}).cluetip({
    splitTitle: '\n',
    sticky: false,
    activation: 'hover',
    onActivate: function(e) {
        return !stickyTooltip;
    },
    onShow: function(ct, c) {
        $('#clickInfo').show();
        stickyTooltip = false;
    },
    onHide: function(ct, ci) {
        $(ct).attr('class', tooltipClass).toggle(stickyTooltip);
    }
});

Answer 2

更新为工作示例：

<a class="title" href="#" title="Test tooltip 1">test 1</a>

$(document).ready(function () {
    var keepTooltip = false;

    $('a.title').cluetip({ splitTitle: '|', sticky: true })
                .mouseout(function () {
                    if (!keepTooltip) {
                        $('#cluetip').hide();
                    }
                });

    $('a.title').click(function (e) {
        e.preventDefault();
        keepTooltip = true;
    });
});

Answer 3

(我不确定您是否尝试过此方法，或者此方法是否会有帮助，但是)

在线索提示上有一个“悬停”激活：

激活：'hover'，//设置为' click‘强制用户点击显示hover

http://plugins.learningjquery.com/cluetip/#options