Merge pull request #2230 from mozilla/issue_1615_tooltips

Make sure only one is ever shown at a time.  Some further cleanup because tooltip code was fugly.

resources/static/common/js/tooltip.js

@@ -8,24 +8,23 @@ BrowserID.Tooltip = (function() {
   "use strict";
 
   var ANIMATION_TIME = 250,
-      TOOLTIP_DISPLAY = 2000,
+      TOOLTIP_MIN_DISPLAY = 2000,
       READ_WPM = 200,
       bid = BrowserID,
-      dom = bid.DOM,
       renderer = bid.Renderer,
-      hideTimer;
+      hideTimer,
+      tooltip;
 
   function createTooltip(el) {
-      var contents = el.html();
-
-      var tooltip = renderer.append("body", "tooltip", {
-        contents: contents
-      });
+    tooltip = renderer.append("body", "tooltip", {
+      contents: el.html()
+    });
 
-      return tooltip;
+    return tooltip;
   }
 
-  function positionTooltip(tooltip, target) {
+  function anchorTooltip(target) {
+    target = $(target);
     var targetOffset = target.offset();
     targetOffset.top -= (tooltip.outerHeight() + 5);
     targetOffset.left += 10;
@@ -33,56 +32,69 @@ BrowserID.Tooltip = (function() {
     tooltip.css(targetOffset);
   }
 
-  function animateTooltip(el, complete) {
-    var contents = el.text().replace(/\s+/, ' ').replace(/^\s+/, '').replace(/\s+$/, '');
-    var words = contents.split(' ').length;
+  function calculateDisplayTime(text) {
+    // Calculate the amount of time a tooltip should display based on the
+    // number of words in the content divided by the number of words an average
+    // person can read per minute.
+    var contents = text.replace(/\s+/, ' ').trim(),
+        words = contents.split(' ').length,
+        // The average person can read ± 250 wpm.
+        wordTimeMS = (words / READ_WPM) * 60 * 1000,
+        displayTimeMS = Math.max(wordTimeMS, TOOLTIP_MIN_DISPLAY);
+
+        return displayTimeMS;
+  }
 
-    // The average person can read ± 250 wpm.
-    var wordTimeMS = (words / READ_WPM) * 60 * 1000;
-    var displayTimeMS = Math.max(wordTimeMS, TOOLTIP_DISPLAY);
+  function animateTooltip(el, complete) {
+    var displayTimeMS = calculateDisplayTime(el.text());
 
     bid.Tooltip.shown = true;
     el.fadeIn(ANIMATION_TIME, function() {
       hideTimer = setTimeout(function() {
-        el.fadeOut(ANIMATION_TIME, function() {
-          bid.Tooltip.shown = false;
-          if(complete) complete();
-        });
+        el.fadeOut(ANIMATION_TIME, complete);
       }, displayTimeMS);
     });
-  }
 
-  function createAndShowRelatedTooltip(el, relatedTo, complete) {
-      // This means create a copy of the tooltip element and position it in
-      // relation to an element.  Right now we are putting the tooltip directly
-      // above the element.  Once the tooltip is no longer needed, remove it
-      // from the DOM.
-      var tooltip = createTooltip(el);
-
-      var target = $("#" + relatedTo);
-      positionTooltip(tooltip, target);
-
-      animateTooltip(tooltip, function() {
-        if (tooltip) {
-          tooltip.remove();
-          tooltip = null;
-        }
-        if (complete) complete();
-      });
+    return displayTimeMS;
   }
 
   function showTooltip(el, complete) {
-    el = $(el);
-    var messageFor = el.attr("for");
+    // Only one tooltip can be shown at a time, see issue #1615
+    removeTooltips();
+
+    // By default, the element passed in is the tooltip element.  If it has
+    // a "for" attribute, that means this tooltip should be anchored to the
+    // element listed in the "for" attribute. If that is the case, create a new
+    // tooltip and anchor it to the other element.
+    var tooltipEl = $(el),
+        tooltipAnchor = tooltipEl.attr("for");
+
+    if (tooltipAnchor) {
+      // The tooltip should be anchored to another element.  Place the tooltip
+      // directly above the element and remove it when it is no longer needed.
+      tooltipEl = createTooltip(tooltipEl);
+      anchorTooltip("#" + tooltipAnchor);
+    }
+
+    return animateTooltip(tooltipEl, function() {
+      removeTooltips();
+      complete && complete();
+    });
+  }
 
-    // First, see if we are "for" another element, if we are, create a copy of
-    // the tooltip to attach to the element.
-    if(messageFor) {
-      createAndShowRelatedTooltip(el, messageFor, complete);
+  function removeTooltips() {
+    if (tooltip) {
+      tooltip.remove();
+      tooltip = null;
     }
-    else {
-      animateTooltip(el, complete);
+
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
     }
+
+    $('.tooltip').hide();
+    bid.Tooltip.shown = false;
   }
 
 
@@ -90,15 +102,7 @@ BrowserID.Tooltip = (function() {
    showTooltip: showTooltip
    // BEGIN TESTING API
    ,
-   reset: function() {
-     if(hideTimer) {
-       clearTimeout(hideTimer);
-       hideTimer = null;
-     }
-
-     $(".tooltip").hide();
-     bid.Tooltip.shown = false;
-   }
+   reset: removeTooltips
    // END TESTING API
  };
 

resources/static/test/cases/common/js/tooltip.js

@@ -7,42 +7,28 @@
   "use strict";
 
   var bid = BrowserID,
-      tooltip = bid.Tooltip
+      tooltip = bid.Tooltip,
+      testHelpers = bid.TestHelpers;
 
   module("common/js/tooltip", {
     setup: function() {
+      testHelpers.setup();
     },
     teardown: function() {
+      testHelpers.teardown();
     }
   });
 
 
-  asyncTest("show short tooltip, min of 2.5 seconds", function() {
-    var startTime = new Date().getTime();
-
-    tooltip.showTooltip("#shortTooltip", function() {
-      var endTime = new Date().getTime();
-      var diff = endTime - startTime;
-      ok(2000 <= diff && diff <= 3000, diff + " - minimum of 2 seconds, max of 3 seconds");
-
-      equal(tooltip.shown, false, "tooltip says it is no longer shown");
-
-      start();
-    });
-
+  test("show short tooltip - shows for about 2.5 seconds", function() {
+    var displayTime = tooltip.showTooltip("#shortTooltip");
+    ok(2000 <= displayTime && displayTime <= 3000, displayTime + " - minimum of 2 seconds, max of 3 seconds");
     equal(tooltip.shown, true, "tooltip says that it is shown");
   });
 
-  asyncTest("show long tooltip, takes about 5 seconds", function() {
-    var startTime = new Date().getTime();
-
-    tooltip.showTooltip("#longTooltip", function() {
-      var endTime = new Date().getTime();
-      var diff = endTime - startTime;
-      ok(diff >= 4500, diff + " - longer tooltip is on the screen for a bit longer");
-
-      start();
-    });
+  test("show long tooltip - shows for about 5 seconds", function() {
+    var displayTime = tooltip.showTooltip("#longTooltip");
+    ok(displayTime >= 4500, displayTime + " - longer tooltip is on the screen for a bit longer");
   });
 
   asyncTest("show tooltip, then reset - hides tooltip, resets shown status", function() {
@@ -56,4 +42,10 @@
     }, 100);
   });
 
+  test("only one tooltip shown at a time", function() {
+    tooltip.showTooltip("#shortTooltip");
+    tooltip.showTooltip("#shortTooltip");
+    equal($(".tooltip:visible").length, 1, "only one tooltip shown at a time");
+  });
+
 }());