Make cluetip keyboard accessible (display on tab focus)

Question

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.

Answer 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.