Saturday, 14 July 2012

Unable to remove the tipsy tooltip plugin with using the fallback option

So I am using the tipsy tooltip plugin to alert a user that the form input in invalid if a XHR request returns false. Now I wanted to add the error text dynamically, so I used the 'fallback' option of the tipsy config, which looks like this:


   self.showTipsy = function() { 

     $('#keywords').tipsy({gravity: 'w', fallback: "Whoops. Did not find matching keywords."}); 

   };  

This is what the manual said if I want to remove it:
Tipsy tooltips are 'live' - if the source attribute's value changes, the tooltip text will be updated the next time the tooltip is shown. There's one caveat - if you wish to remove the tooltip by setting the title attribute to an empty string, set theoriginal-title attribute instead (this only applies if you're using the title attribute).
Unfortunately though, when I tried that it did not work. I also try to try to hide the tipsy as mention also in the manual. Still no luck. I did find a solution for it after doing a search on google:


   self.hideTipsy = function() { 

     $("#keywords").unbind('mouseenter mouseleave'); //workaround 

   }  

Hope that helps someone!

1 comment:

  1. Thank you for posting this!

    This is the only solution that allows me to add/remove/add tooltips to the same element without re-rendering the view.

    ReplyDelete