Poshytip content overlaps onmouseover function when the content changes based on condition

[maddan]

I have a code snippet regarding poshytip plugin issue:
Show tooltip for hover"

var showFav = function(id){

$('.tip-fav').remove();
    var Text= "";
    if($("#"+id).attr("class") == "fi"){
        Text= "ADD FAVORITES";
    }else{
        Text= "REMOVE FAVORITES";
    }
$("#"+id).poshytip('disable').poshytip('enable');
      $(id).poshytip({
        content: 'Text',
        className: 'tip-fav',
        bgImageFrameSize: 9,
        showOn: 'hover',
        delay:0,
        alignX: 'right',
        alignY: 'top'
});
}

HTML/JSP:

if (condition){

<img class="fi" onmouseover="showFav(this.id);" ../>
} else {
<img class="fsi" onmouseover="showFav(this.id);" ../>
} </div>

(*Note the classname changes dynamically. When class=fi, I want to show 'Add' and when class=fsi, i want to show 'Remove')

The problem with is whenever I hover the image. The first time it works and show the content fine (ie 'Add Favorites'). After I click the image and then hover out it shows 'Remove Favorites'.

Now again hover back in, both contents are over lapped with text 'Add Favorties' on top of 'Remove Favorites'. Is there a way to show only one content at a time? I did try to disable and enable but with no luck $("#"+id).poshytip('disable').poshytip('enable');

Is there a way to get rid of this issue?
Thanks.
Much appreciated.

[vadikom]

If possible, please post a complete live demo where the issue can be tested as it's not very simple to figure out the problem just by looking at your short code samples. But it seems likely that this is an issue with your code rather than with Poshytip's code so I would recommend to post your question in the support forum instead:

http://www.smartmenus.org/support/forums/#/categories/poshytip-jquery-plugin

Thanks!