[jQuery] ClueTip vs Image Maps
Hello Karl,
I've been working with using ClueTip and image maps again and I think I
have an idea on how to get rid of the native IE tips.
Essentially (as a reminder) the problem was how to get rid of the native
tooltip that IE throws up so that your not getting them at the same time as
the ClueTip.
Another consideration was to keep the HTML so that it would validate and
also not to make the image map inaccessible for screen readers.
In testing I set the image map like this:
<map name="300x300">
<area id="r1c1" class="load-local" shape="rect" coords="1,1,100,100"
href="#cr1c1" alt="This is R1C1" >
</map>
Note that there is NOT a "title" attribute as that seems to always display
in IE.
I am using the "alt" attribute to pass the value to ClueTip.
Also having the "alt" tag set makes it screen reader friendly AFAIK.
My ClueTip is set like this:
<script type="text/javascript">
$(document).ready(function() {
$.cluetip.setup({insertionElement: '#mycontent_wrap'});
$('area.load-local').cluetip({
local:true,
hideLocal: true,
showTitle: true,
sticky: false,
arrows: true,
titleAttribute: 'title',
attribute: 'href' });
});
</script>
Now if I modify jquery.cluetip.js at about line 70 like this:
$(this).attr('alt','');
Then ClueTip works correctly over the image map (no IE tip) AND the code
still passes HTML validation because I'm not using any attributes to pass
data to ClueTip that don't belong to the <area> tag.
I'm not sure if this is breaking the screen reader because AFAIK it would
not be triggering ClueTip to remove the alt description, but I think that
is correct.
However it might be that you could remove it as the tip is activated, store
it in a variable and then restore it as the tip closes.
I played around with that a bit, but my Javascript/jQuery skills are modest
to say the least.
Maybe you could do that (or tell me where/how)?
The only down side (assuming my code above is OK, is that I lose the title
of the tip since I am passing that value in on the Alt tag and then
removing it early in your script.
So if we could grab it for the title (in ClueTip - and NOT reset the IE
title), clear it while the tip is open and put it back when the tip closes,
this would make ClueTip work perfectly over image maps.
I really like ClueTip and I think that this combo will make it possible to
use it on Image Maps in IE without losing code validation.
I look forward to hearing what you think on this and seeing what you can do
with it or suggest.
Thanks!
Chuck