我将线索提示插件与 jQuery FullCalendar 一起使用,以显示效果很好的事件详细信息。我想在每个描述中都有一个用户可以点击的链接。但我不希望用户必须点击每个事件才能显示信息。
有什么选项可以用来在鼠标悬停时显示线索提示,在鼠标悬停时隐藏它,但在点击时使其保持粘性?还没有找到,但我想这会产生非常直观的行为......
更新为工作示例:
<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;
});
});
(我不确定您是否尝试过这个,或者这是否会有所帮助)
线索提示上有一个“悬停”激活:
activation: 'hover', // 设置为 'click' 强制用户点击显示线索提示
终于找到了解决我的问题的有效方法 - 通过创建 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);
}
});