Question

I have my code as a jsFiddle. i need to close the previous dialog(if open any) on click of bar so that i can just show my new dialog. I am not able to do that.

Here is my javascript code here which handles the tooltip

function pieClick(event, pos, obj)
{    
if (obj) {        
showTooltip(obj.pageX, obj.pageY,
                            obj.series.label);
}}

function showTooltip(x, y, contents) {
var tooltip = $('<div class="tooltip">' + contents
        + '<span class="arrow"></span></div>');
tooltip.css({
    top : y - 25,
    left : x + 15
}).appendTo("body").fadeIn(10);
}

$("#placeholder").bind("plotclick", pieClick);

I need to do something in this pieClick() function. But i am not able to figure out how to do…How to do it?

Answer 1

Add this line to the start of your pieClick Method:

$(".tooltip").fadeOut(10);

Updated fiddle

Update: Thinking a little more about this, it’s probably worth throwing in this line:

$(".tooltip").Remove();

To actually remove the content. Otherwise you’ll keep adding content to the body of the document every time somebody clicks.

If you want to make sure you can still fade out the old tooltip, you can do this:

var old = $(".tooltip").fadeOut(10, function(){
    old.remove();
});

Although if your fadeout is 10ms, you probably won’t notice the difference.