Make jQuery tipsy appear on hover and on click

Question

At the moment, I am trying to get Tipsy to work on hover and on click. But I don't know if this is possible… It would be very inconvenient to use an other tool.

The trigger: 'manual' does not respond at all. Is it possible or do I really have to use an other tool?

This is part of the code:

function initiateMouseEvents() { $('.channel-hover').each(function() {

    $('svg circle, svg path').tipsy({
        gravity: 's',
        trigger: 'manual',
        html: true,
        title: 'data-tipsy'
    });

    var dataChannel = $(this).attr('data-channel');

    $(this).bind('mouseover', function() {
        if ($(this).attr('data-channel').length) {
            effectVisualisation.highlightChannel(dataChannel);
            costVisualisation.highlightChannel(dataChannel);
        }
    }).bind('mouseout', function() {
        if ($(this).attr('data-channel').length) {
            effectVisualisation.normalizeChannel(dataChannel);
            costVisualisation.normalizeChannel(dataChannel);
        }
    });
});

}

Answer 1

From your code I'm not sure what you're really trying to do, or your code is incomplete.

Please check out below HTML:

<a id="example-1" href="#" original-title="Hello World">Hover over me</a>
<a id="test" href="#" onclick="$('#example-1')[0].setAttribute('original-title','you did it')">Update</a>

Javascript:

$(function() {
    $('#example-1').tipsy();
});

that's what you might be expecting.

Edit: Sorry I'd to include code to post JsFiddle link.

http://jsfiddle.net/c3DUx/

Edit 2:

Check below fiddle, I hope you want something similar.

http://jsfiddle.net/c3DUx/2/

Answer 2

It's possible to define (manual/custom) trigger for tipsy:

$(function() {
  $('#focus-example [title]').tipsy({trigger: 'focus'});
});

See: http://onehackoranother.com/projects/jquery/tipsy/#focus-example

Nevertheless Tipsy seems not to support multiple triggers by default. But it might be possible to manually bind this behavior - depending on what exactly you're trying to do.

Do you have some sample code of what you have tried so far?

---

Edit: Just find a similar thread regarding (a part of)this issue:

$(".tipsy")
.live('mouseover',function(){
    $(this).tipsy("show");
})
.live("click",function() {
    $(this).tipsy("show");
})
.tipsy({
    gravity: gravity,
    html: true
});

jQuery Tipsy: Simple Overwriting Solution?