Search code examples
jqueryjquery-pluginsjquery-eventscluetip

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 the 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...


Solution

  • 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);
        }
    });