jQuery clueTip: show/hide on mouseover and sticky on click

Question

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

If someone knows a tooltip library (jquery or not) proposing this feature (instead of hacking cluetip), i'm interested. — lolesque, Jan 15 '13 at 13:30

Terry · Answer 1 · 2011-09-29T20:32:47.403

1

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

edited Sep 29 '11 at 20:32

answered Sep 27 '11 at 19:24

Terry

14,099
9
56
84

I am afraid when doing it like that the user has to scroll over the element twice. Once to activate/attach and once to actually trigger the cluetip... – Bruiser Sep 29 '11 at 19:24

score 0 · Answer 2 · answered Sep 27 '11 at 19:19

0

(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

answered Sep 27 '11 at 19:19

orolo

3,951
2
30
30

score 0 · Accepted Answer · answered Oct 26 '11 at 13:27

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

jQuery clueTip: show/hide on mouseover and sticky on click

3 Answers3