Difference between revisions of "ARIA Tooltip"

From Level Access Web Labs
Jump to navigation Jump to search
Line 33: Line 33:
  
 
   var tips = []; // an array of tooltips
 
   var tips = []; // an array of tooltips
 
  // create a tooltip object for each input
 
 
   $('div.text input').each(function(index) {
 
   $('div.text input').each(function(index) {
 
     tips[index] = new tooltip($(this));
 
     tips[index] = new tooltip($(this));
 
   });
 
   });
 
      
 
      
}); // end ready event
+
});  
  
//
 
// tooltip() is a tooltip widget. It requires the element that has the tooltip to reference
 
// the tooltip via aria-describedby. Normally this is a div that contains text
 
//
 
// @param ($id object) $id is the jquery object of the input or other element to bind the widget to
 
//
 
// @return N/A
 
//
 
 
function tooltip($id) {
 
function tooltip($id) {
 
  // define the object properties
 
 
 
   this.$id = $id;
 
   this.$id = $id;
 
   this.$tip = $('#' + $id.attr('aria-describedby'));
 
   this.$tip = $('#' + $id.attr('aria-describedby'));
   this.mouseover = false; // set to true of the tooltip was displayed via mouseover. reset on mouseout
+
   this.mouseover = false;
   this.focus = false; // set to true of the input has focus (prevent hide on mouseout)
+
   this.focus = false;
   this.dismissed = false; // set to true of the user dismissed the tooltip with the esc key. Reset on blur
+
   this.dismissed = false;
  
 
   // hide the tooltip
 
   // hide the tooltip
Line 65: Line 52:
 
   this.bindHandlers();
 
   this.bindHandlers();
  
} // end tooltip() constructor
+
}
 
 
//
 
// function showTip() is a member function to display the tooltip
 
//
 
// @return N/A
 
//
 
 
tooltip.prototype.showTip = function() {
 
tooltip.prototype.showTip = function() {
  
   // display the tooltip
+
    
 
   this.$tip.css('display', 'inline');
 
   this.$tip.css('display', 'inline');
  
} // end showtip()
+
}
 
 
//
 
// function hideTip() is a member function to hide the tooltip
 
//
 
// @return N/A
 
//
 
 
tooltip.prototype.hideTip = function() {
 
tooltip.prototype.hideTip = function() {
  
   // hide the tooltip
+
    
 
   this.$tip.hide();
 
   this.$tip.hide();
  
} // end hidetip()
+
}
 
 
//
 
// function bindHandlers() is a member function to bind event handlers to the input
 
//
 
// @return N/A
 
//
 
 
tooltip.prototype.bindHandlers = function() {
 
tooltip.prototype.bindHandlers = function() {
  
Line 120: Line 89:
 
   });
 
   });
  
} // end bindHandlers()
+
}
 
 
//
 
// function handleKeyDown() is a member function to process keydown events for the input
 
//
 
// @param ($id object) $id is the jquery object of the element firing event
 
//
 
// @param (e object) e is the event object associated with the event
 
//
 
// @return (boolean) returns false if processing; true if doing nothing
 
//
 
 
tooltip.prototype.handleKeyDown = function($id, e) {
 
tooltip.prototype.handleKeyDown = function($id, e) {
  
Line 147: Line 106:
 
   return true;
 
   return true;
  
} // end handleKeyDown()
+
}
 
 
//
 
// function handleMouseOver() is a member function to display the tooltip on mouseover
 
//
 
// @param ($id object) $id is the jquery object of the element firing event
 
//
 
// @param (e object) e is the event object associated with the event
 
//
 
// @return (boolean) returns false
 
//
 
 
tooltip.prototype.handleMouseOver = function($id, e) {
 
tooltip.prototype.handleMouseOver = function($id, e) {
  
 
   this.showTip();
 
   this.showTip();
  
  // set the mouseover flag to prevent blur dismissing tooltip
+
 
   this.mouseover = true;
 
   this.mouseover = true;
  
Line 168: Line 117:
 
   return false;
 
   return false;
  
} // end handleMouseOver()
+
}  
 
 
//
 
// function handleMouseOut() is a member function to hide the tooltip on mouseout. If the
 
// input has focus and the user did not dismiss the tooltip, the tooltip is not hidden.
 
//
 
// @param ($id object) $id is the jquery object of the element firing event
 
//
 
// @param (e object) e is the event object associated with the event
 
//
 
// @return (boolean) returns false
 
//
 
 
tooltip.prototype.handleMouseOut = function($id, e) {
 
tooltip.prototype.handleMouseOut = function($id, e) {
  
Line 192: Line 130:
 
   return false;
 
   return false;
  
} // end handleMouseOut()
+
}
 
 
//
 
// function handleFocus() is a member function to display the tooltip on focus
 
//
 
// @param ($id object) $id is the jquery object of the element firing event
 
//
 
// @param (e object) e is the event object associated with the event
 
//
 
// @return (boolean) returns false
 
//
 
 
tooltip.prototype.handleFocus = function($id, e) {
 
tooltip.prototype.handleFocus = function($id, e) {
  
 
   this.showTip();
 
   this.showTip();
 
  // set the focus flag to prevent mouseout from hiding the tooltip as long
 
  // as the input has focus
 
 
   this.focus = true;
 
   this.focus = true;
 
 
   e.stopPropagation();
 
   e.stopPropagation();
 
   return false;
 
   return false;
 
+
}
} // end handleFocus()
 
 
 
//
 
// function handleBlur() is a member function to hide the tooltip on blur. The tooltip is not
 
// hidden if the mouseover flag is true (i.e. tooltip was displayed via mouseover).
 
//
 
// @param ($id object) $id is the jquery object of the element firing event
 
//
 
// @param (e object) e is the event object associated with the event
 
//
 
// @return (boolean) returns false
 
//
 
 
tooltip.prototype.handleBlur = function($id, e) {
 
tooltip.prototype.handleBlur = function($id, e) {
 
 
   if (this.mouseover == false) {
 
   if (this.mouseover == false) {
 
     this.hideTip();
 
     this.hideTip();
 
   }
 
   }
 
  // reset the focus and dismissed flags
 
 
   this.focus = false;
 
   this.focus = false;
 
   this.dismissed = false;
 
   this.dismissed = false;
 
 
   e.stopPropagation();
 
   e.stopPropagation();
 
   return false;
 
   return false;
 
+
}
} // end handleBlur()
 
  
 
   </script>
 
   </script>

Revision as of 17:10, 28 March 2014

Create Account

*
*
*
*