jQuery clueTip: show/hide on mouseover and sticky on click
I'm using the cluetip plugin together with the jQuery FullCalendar to show event details which works quite good. I would like to have a link in each description that the user can click on. But I don't want to have th开发者_运维知识库e users have to click on each event to show the info.
Is there any option I can use to show the clueTip on mouseover, hide it on mouseout, but make it sticky on click? Didn't found one yet but I guess that would make very intuitive behaviour...
Updated to working example:
<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;
});
});
(I'm not sure if you've tried this or if this will help but)
There is a 'hover' activation on cluetip:
activation: 'hover', // set to 'click' to force user to click to show clueTip
http://plugins.learningjquery.com/cluetip/#options
Finally found a working way to solve my problem - by creating 2 cluetips... the 'mouseout' solution didn't work as expected :-/
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);
}
});
精彩评论