Triggering a tooltip on click event Created Jan 17, 2010

I also would like the tooltip to appear on click, and diappear on clicking outside (just moving outside would also be ok). What can I do, not being a programmer?

Many thanks.

Is there a mechanism to initiate the tooltip on a onClick event.
Thanks.

My tooltip is triggered by a span element. I tried to set it to the following, but still the mouseover behavior is dominating.

$("#spanelement").tooltip({
events:{span:'click, mouseout'},
tip: '#tip',
offset: [2, 2],
effect: 'slide' ,
delay: 300,
onBeforeShow:function() {resetToolTipContent(); }
// add dynamic plugin
}).dynamic({
// customized configuration on bottom edge
bottom: {
// slide down,up, right and left , for now right.
direction: 'right',
// bounce back when closed
bounce: true
}
});

I've found the only way to get around this bug is to individual specify a unique hover item and tool tip item.

Instead of a generic call e.g.

$("#form:input").tooltip({ 
    events: {def:"click,click"}, 
    position: "center right", 
    offset: [0, 0], opacity: 1, 
    tip: '.tooltip'
}); 

Use specific calls for items:

$("#item1").tooltip({
    events: {def:"click,click"},
    position: "center right",
    offset: [0, 0],
    opacity: 1,
    tip: '#tooltip1'
}); 
$("#item2").tooltip({
    events: {def:"click,click"},
    position: "center right",
    offset: [0, 0],
    opacity: 1,
    tip: '#tooltip2'
}); 
$("#item3").tooltip({
    events: {def:"click,click"},
    position: "center right",
    offset: [0, 0],
    opacity: 1,
    tip: '#tooltip3'
}); 

Not a great work around, but if you are generating things on the fly with PHP you should be able to generate all the references easily.

Here is the solution to get tooltip correctly working onClick event:

<script>
$(".someClass").tooltip({ 

   //the trick is to set it like this
   events: {def: "click,mouseout"},

   //the tip content
   tip: '#elementToBeShown', 

   //the effect
   effect: 'slide'
});
</script>

there is also no problem to generate dynamic tooltips with php, all you need to do is to generate element that will be shown(must be uniqe) and according to it java code :-) the code below should be useful:

<?php 
echo "<script>
"; 
    foreach($userList as $user => $userData){ 
        echo "$(".tp-{$userData['username']}")"
        . ".tooltip({ events: {def: "click, mouseout"}, " 
        . "tip: '#tp-{$userData['username']}', effect: 'slide'}); 
";
    } 
echo "</script>";
?>

there should be " with slash on the front instead of single " inside echo function but here slashes are stripped out while posting i guess ;/

hope this helps to someone...

...had the same issue, and this answer solved it.

But what if you'd like to use only one of the arguments?

def's default is "mouseenter,mouseleave". If you don't want the 'mouseleave' argument (you want to close the tooltip using the api (http://flowplayer.org/tools/tooltip/index.html#api) ), use a zero-length string in place of the mouseleave argument:

events: { def: "mouseenter,''" }

...or handle the entire showing and hiding of the tooltip using the api:

events: { def: "'',''" }

Took some quality time to figure it out, but should save you some.

Although this tooltip library is really nice and functions well with the current default behaviors, it seems a bit lacking when it comes to customizing it (for better or for worse). It seems like it wasn't mean to be triggered with a click, as tooltips generally display when you hover over something.

Of course there are ways to get around this by defining custom code in the callbacks, etc. but that sort of defeats the purpose of using this nice lightweight library. I may put together my own tooltip library based on this one or extend this one with a plugin or something to handle clicks properly. Clicks to trigger both the tooltip as well as hide it when clicking outside of it.