Search code examples
javascriptjqueryhtmltipsy

Jquery: Tipsy doesn't show on disabled elements

I'm using Tipsy (Tipsy project page) to show some helpful and in some cases crucial information. It works amazing, and entirely I recommend it.

The problem is that it doesn't seem to be working on disabled elements. I'm calling Tipsy like:

$('.list-view-button').tipsy({
     live: true, 
     title: "data-tipsy", 
     gravity: 's', 
     fade: false, 
     fallback: 'error', 
     offset: 4, 
     delayIn: 500
});

All works perfect unless the .list-view-button is disabled. Tipsy wont hide or show on any disabled element.

I don't want to open it the via the api, is there another way around this?

Solution

  • Since disabled elements don't fire events in many browsers you end up having to work around it. This http://blog.pengoworks.com/index.cfm/2010/4/23/Attaching-mouse-events-to-a-disabled-input-element is a method I've used before.

    Alternately wrap your inputs in a span, and attach to tootip to it instead (similar question to this previous SO thread Title Attribute on Disabled Elements in Firefox)