1

I'm struggling to figure out how to make a jQuery cluetip display on focus of the trigger text link which uses hover. I need it to work when tabbing (onfocus) through content for accessibility purposes.

<script>
$(function(){    

  $('a.tip').cluetip({width:200, local:true, cursor:'pointer', sticky: true,closePosition: 'title', arrows: true, titleAttribute:   'title', showTitle:true });
  $(".tip-content").hide();        

  $('a.tip').focus(function() {   
    $(this).click();
  });

});
</script>

HTML:

<a id="load-local" class="tip" href="#cc" rel="#cc" title="Tooltip">Tooltip link</a>
<span class="tip-content" id="cc">Tool tip content</span>

Totally frustrated. It seems like it should be a simple thing to do, but I'm not having luck.

Ryan B
  • 3,364
  • 21
  • 35
Jon Fin
  • 11
  • 1
  • 1
    Curious, noticed you've got the title attribute set here - are you also using that for tooltip effect? Title is often discouraged for accessibility reasons, since keyboard users can't cause it to be shown. – BrendanMcK Nov 17 '11 at 06:50
  • The title is used to set the heading of the tooltip. That's how clueTip works :P – scumah Nov 17 '11 at 07:59
  • 1
    Got it. (That actually seems like a decent idea; if JS is disabled, then at least the heading will appear on hover, since that's how Title works - but it still has the other Title issues.) So seems that clueTip itself has some accessibility issues; requiring use of Title, and not itself being keyboard accessible. So the real question is is: how to bludgeon this plugin to be more accessible. Ideal might be to 'subclass' or equivalent and add a focus/blur handler that forwards to its existing mouseenter/leave handlers. – BrendanMcK Nov 18 '11 at 10:12

1 Answers1

1

If you want it to work you need to add the activation property to the clueTip call, like this:

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

That way, your code should work, but your clueTips will only be triggered on click and not on hover.

EDITED: In order to keep the hover effect, and due to the fact that clueTip doesn't have any method to programatically show the tip, I think you are going to need two plugin calls, one with activation: 'click' and the other one without it:

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });
$('a.tip').cluetip({width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

That way the tips will pop on hover and on click, and that way, tabbing through the links will fire the focus event, hence the click.

scumah
  • 6,273
  • 2
  • 29
  • 44
  • Thanks, but unfortunately I want to keep the hover state for mouseusers and allow keyboard users to have focus or onclick. – Jon Fin Nov 16 '11 at 16:01
  • In that case, if we tried to make it clean, you would need some clueTip method that showed up the tip on your call, but I'm afraid there's no such thing :/ That being said, you can use two cluetip calls, one with click activation and the other one without it. It's not the cleanest thing in the world, but it might do the trick. See edit. – scumah Nov 16 '11 at 17:07