I am using jquery tools Tooltip to create tooltips.
I created a tooltip like this...a tooltip which only opens on clicking and closes when I press a close button(triggering "closeTooltip" event).
$('#request_button').tooltip({
opacity: 1.0,
position: 'top center',
offset: [10, 0],
events: {
def: "openTooltip, closeTooltip",
tooltip: "undefinedEvent, closeTooltip"
},
onBeforeShow: function() {
alert("I will hide the existing tooltips first");
$('#request_button').trigger('closeTooltip');
},
onShow: function() {
alert("I have shown the new tooltip");
},
onBeforeHide: function() {
alert("I have started hiding existing tooltips");
},
onHide: function() {
alert("I have hidden all existing tooltips");
},
tip: "#tooltip_contents" // I am using same div for multiple trigger elements
});
I am opening/closing the tooltip like this..
$('#request_button').click(function() {
$(this).trigger('openTooltip');
});
$('#close_tooltip').click(function() {
$('#request_button).trigger('closeTooltip');
});
Since I have multiple trigger elements defined I have the necessity to close any open tooltips. When I tried this in onBeforeShow() event, it didn't work out the way I wanted.
The alert messages appeared in the following order...
What this does is it hides the current tooltip as well. The order I want is...
How can I achieve this? What am I doing wrong over here?
what worked for me was the following code...
$("#request_button").click(function (e)
{
var tooltip_api = $(this).data('tooltip');
if (tooltip_api.isShown(true)) {
tooltip_api.hide();
}
});
Hope this helps.