0

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

}

Miet
  • 45
  • 1
  • 2
  • 9

2 Answers2

3

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/

Nilesh Thakkar
  • 2,877
  • 1
  • 24
  • 43
  • Thank you Nil, but I'm trying to set tipsy to work on click. It only seems to work on focus, and if you want it to work on click, you have to do it manually in the code which is not possible in the code I'm writing in. Is there a work around? – Miet Mar 19 '13 at 07:20
  • Did you check the fiddle? it works on click too, click the button and check. – Nilesh Thakkar Mar 19 '13 at 07:57
  • Yes I checked, thank you, but there is no problem with the content. The tooltip should appear on click and only disappear when clicked again — not automatic. Is that possible? – Miet Mar 19 '13 at 08:52
  • could you elaborate more? on clicking tipsy will hide it or the element by clicking which tipsy appeared (you want to toggle tipsy by clicking the same element? – Nilesh Thakkar Mar 19 '13 at 09:03
  • Yes, I would like to toggle tipsy by clicking the same element, that's right. – Miet Mar 19 '13 at 09:33
0

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?

Community
  • 1
  • 1
simplyray
  • 1,200
  • 1
  • 16
  • 25
  • Thank you, but the trigger: focus seems to break everything… I don't have anything working yet, but when I do, I will post. – Miet Mar 18 '13 at 13:08
  • I have edited the questions because the code wouldn't fit in here. Does this help? – Miet Mar 18 '13 at 13:12
  • After some research i've just found the solution for your problem, see edit. – simplyray Mar 18 '13 at 13:30
  • Thank you @simplyray but the tooltip still disappears, I would like it to appear on click and disappear on second click. I'm sorry for not making my question clear enough! – Miet Mar 19 '13 at 07:38