qtip on a disabled checkbox

[doze]

Hi,

Is it possible to get qtip show for disabled checkboxes?

I have a checkbox setup like:

JS Code

<div style="white-space: nowrap;">
      <input id="checkbox_1" type="checkbox" name="something" disabled="disabled" />
      <span id="checkbox_1_text">some text</span>
</div>
<div style="white-space: nowrap;">
      <input id="checkbox_2" type="checkbox" name="something_else" />
      <span id="checkbox_2_text">some other text</span>
</div>

Then I try to make qtip appear for both, the text and for the checkboxes:

JS Code

<script type="text/javascript">
$('#checkbox_1').qtip({content: 'some content', position: { adjust: { x: 4, y: 3 } } });
$('#checkbox_1_text').qtip({content: 'some content', position: { corner: { target: 'bottomLeft' } } });
$('#checkbox_2').qtip({content: 'some other content', position: { adjust: { x: 4, y: 3 } } });
$('#checkbox_2_text').qtip({content: 'some other content', position: { corner: { target: 'bottomLeft' } } });
</script>

But the qtips doesn't show up for the checkboxes that are disabled. Any way to do that?

[dustmoo]

Hello doze,

Have you tried including the checkbox within your span element? I haven't tested it, but that way you should only need to instantiate a qtip for the span element and it should show whether you are over the checkbox or the text.
You may need to set the span display to block.

Anyway, if that doesn't work, I will test your code and see what I can find.

Thanks!

Dustin

[doze]

Hi Dustin,

I tried to wrap the checkbox in to the span also, and tried to set the span to block level element, but it didn't work..

It only shows the qtip from the text and not when hovering the checkbox.

[dustmoo]

doze,

On doing some further reading, disabled elements purposely ignore events. So in all the cases I tried, in a div, span, link etc. The disabled control always ignored my events. Even when I just used basic javascript event handlers.

A possible work around to this would be to hide the disabled checkbox and show an image in it's place(of a disabled checkbox) This would show the tooltip properly when users mouseover the image. Then, when you re-enable the checkbox, you simply hide the image and show the checkbox.

Anyway, Craig's javascript-fu is better than mine, he may know of something that I don't.

[Craig]

doze,

As dustmoo pointed out disabled elements don't register events, since in essence that defines what a disabled input actually is. However, the best way to get around this is to simply define a seperate show target, such as the inputs parent element.