DIV inside TD - both with qTip. Both qtips are shown when clicking DIV

Question

I have a big table with a lot of cells and some of these cells have divs inside of it.

If the user clicks directly on a cell another qtip should be shown than if he would click on a div.

This is my code:

$('#table').on('click', 'td', function(event){ click_td(event); });    

function click_td(e) {

        if ( $(e.target).hasClass('div') )
        {
            var content = tip1_conent(e);

            $(e.target).qtip({
                overwrite: false,
                content: {text: content},
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                hide: {
                    fixed: true,
                    inactive: 3000
                }
            }, e);
        }
        else
        {
            var td = (e.target.localName=='td')?$(e.target):$(e.target).parents('td');            
            var content = tip2_conent(e);

            $(e.target).qtip({
                overwrite: false,
                content: {text: content},
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                hide: {
                    fixed: true,
                    inactive: 3000
                }
            }, e);
        }
}

Problems:

1. When i'm using this code - after series of clicking (ie. in DIV, then TD, then DIV) both qtips will be shown at the same time.

2. If I destroy the tooltip on hide event:

   events: { hide: function() { $(this).qtip('destroy', true); } }

i'll receive a lot of erors in console of FF in jquery.min:

• TypeError: this.options is null

• TypeError: o is null

What is the most effective method to do it with hundreds elements on page?

UPD_1: http://jsfiddle.net/EcStud/Gfkg4/ - this is jsfiddle version

Answer 1

var oQtip;

$('#table').on('click', 'td', function(event){ click_td(event); });

function click_td(e) {

    if( oQtip )
    {
          if( oQtip.is(':visible') )
          {
              oQtip.hide();
          }
    }
    if ( $(e.target).hasClass('div') )
    {
        var content = tip1_conent(e);

        oQtip = $(e.target).qtip({
            overwrite: false,
            content: {text: content},
            show: {
                solo: true,
                event: 'click',
                ready: true
            },
            hide: {
                fixed: true,
                inactive: 3000
            }
        }, e);
    }
    else
    {
        var td = (e.target.localName=='td')?$(e.target):$(e.target).parents('td');            
        var content = tip2_conent(e);

        oQtip = $(e.target).qtip({
            overwrite: false,
            content: {text: content},
            show: {
                solo: true,
                event: 'click',
                ready: true
            },
            hide: {
                fixed: true,
                inactive: 3000
            }
        }, e);
    }

}