[Summary view] [Print] [Text view]

   1  define(['jquery'], function($) {
   2  
   3      /**
   4       * Tooltip class.
   5       *
   6       * @param {String} selector The css selector for the node(s) to enhance with tooltips.
   7       */
   8      var Tooltip = function(selector) {
   9          // Tooltip code matches: http://www.w3.org/WAI/PF/aria-practices/#tooltip
  10          this._regionSelector = selector;
  11  
  12          // For each node matching the selector - find an aria-describedby attribute pointing to an role="tooltip" element.
  13  
  14          $(this._regionSelector).each(function(index, element) {
  15              var tooltipId = $(element).attr('aria-describedby');
  16              if (tooltipId) {
  17                  var tooltipele = document.getElementById(tooltipId);
  18                  if (tooltipele) {
  19                      var correctRole = $(tooltipele).attr('role') == 'tooltip';
  20  
  21                      if (correctRole) {
  22                          $(tooltipele).hide();
  23                          // Ensure the trigger for the tooltip is keyboard focusable.
  24                          $(element).attr('tabindex', '0');
  25                      }
  26  
  27                      // Attach listeners.
  28                      $(element).on('focus', this._handleFocus.bind(this));
  29                      $(element).on('mouseover', this._handleMouseOver.bind(this));
  30                      $(element).on('mouseout', this._handleMouseOut.bind(this));
  31                      $(element).on('blur', this._handleBlur.bind(this));
  32                      $(element).on('keydown', this._handleKeyDown.bind(this));
  33                  }
  34              }
  35          }.bind(this));
  36      };
  37  
  38      /** @type {String} Selector for the page region containing the user navigation. */
  39      Tooltip.prototype._regionSelector = null;
  40  
  41      /**
  42       * Find the tooltip referred to by this element and show it.
  43       *
  44       * @param {Event} e
  45       */
  46      Tooltip.prototype._showTooltip = function(e) {
  47          var triggerElement = $(e.target);
  48          var tooltipId = triggerElement.attr('aria-describedby');
  49          if (tooltipId) {
  50              var tooltipele = $(document.getElementById(tooltipId));
  51  
  52              tooltipele.show();
  53              tooltipele.attr('aria-hidden', 'false');
  54  
  55              if (!tooltipele.is('.tooltip')) {
  56                  // Change the markup to a bootstrap tooltip.
  57                  var inner = $('<div class="tooltip-inner"></div>');
  58                  inner.append(tooltipele.contents());
  59                  tooltipele.append(inner);
  60                  tooltipele.addClass('tooltip');
  61                  tooltipele.addClass('bottom');
  62                  tooltipele.append('<div class="tooltip-arrow"></div>');
  63              }
  64              var pos = triggerElement.offset();
  65              pos.top += triggerElement.height() + 10;
  66              $(tooltipele).offset(pos);
  67          }
  68      };
  69  
  70      /**
  71       * Find the tooltip referred to by this element and hide it.
  72       *
  73       * @param {Event} e
  74       */
  75      Tooltip.prototype._hideTooltip = function(e) {
  76          var triggerElement = $(e.target);
  77          var tooltipId = triggerElement.attr('aria-describedby');
  78          if (tooltipId) {
  79              var tooltipele = document.getElementById(tooltipId);
  80  
  81              $(tooltipele).hide();
  82              $(tooltipele).attr('aria-hidden', 'true');
  83          }
  84      };
  85  
  86      /**
  87       * Listener for focus events.
  88       * @param {Event} e
  89       */
  90      Tooltip.prototype._handleFocus = function(e) {
  91          this._showTooltip(e);
  92      };
  93  
  94      /**
  95       * Listener for keydown events.
  96       * @param {Event} e
  97       */
  98      Tooltip.prototype._handleKeyDown = function(e) {
  99          if (e.which == 27) {
 100              this._hideTooltip(e);
 101          }
 102      };
 103  
 104      /**
 105       * Listener for mouseover events.
 106       * @param {Event} e
 107       */
 108      Tooltip.prototype._handleMouseOver = function(e) {
 109          this._showTooltip(e);
 110      };
 111  
 112      /**
 113       * Listener for mouseout events.
 114       * @param {Event} e
 115       */
 116      Tooltip.prototype._handleMouseOut = function(e) {
 117          var triggerElement = $(e.target);
 118  
 119          if (!triggerElement.is(":focus")) {
 120              this._hideTooltip(e);
 121          }
 122      };
 123  
 124      /**
 125       * Listener for blur events.
 126       * @param {Event} e
 127       */
 128      Tooltip.prototype._handleBlur = function(e) {
 129          this._hideTooltip(e);
 130      };
 131  
 132      return Tooltip;
 133  });