CODEWITHSUNDEEP
accessibilityqtip
Zack Macomber
Zack Macomber

Reputation: 6905

How to enable keyboard/screen reader functionality for qTip

I've recently implemented the qTip jQuery plugin. In doing a code review recently with my boss, Web Accessibility came up in the discussion and specifically qTip was addressed.

Currently, I have qTip working such that when hovering over certain icons on my qTip-enabled web pages, a tool tip will display for the user. Well, that works great for folks that use a mouse, but for those who only use a keyboard, that's not going to work.

I've started to do some research on Web Accessibility, and I've read material primarily on W3C.

How could I enable keyboard/screen reader functionality for qTip?

Upvotes: 3

Views: 1080

Answers (1)

steveax
steveax

Reputation: 17743

I'd do something along these lines...

Add the content you want in the qTip HTML Markup (rather than in the title attribute):

<p>
<a href="#">
  <span class="hidden">This is the qtip content</span>
  And this is the link content
</a>
</p>

Hide the qTip content with CSS (even nicer would be to use something like modernizr to only hide the content if the user had JavaScript enabled, viz: .js .hidden for the selector):

.hidden {
   position: absolute;
   display: block;
   top: -10000px;
   left: -10000px;
   font-size: 1px;
}

Then after including jQuery and the qTip scripts, create the qTips using the hidden content for the qTip content and adding focusin and focusout events to show/hide the qTip:

$('a').qtip({
   content: {
      text: function(api) {
         return $(this).children('.hidden').text();
      }
   }
});

$(document).ready(function(){
   $('a').focusin(function() {
      $(this).qtip('toggle', true);
   });
   $('a').focusout(function() {
      $(this).qtip('toggle', false);
   });
});

Fiddle: http://jsfiddle.net/MnB6Q/

Upvotes: 8

Related Questions