Change TooltipManager API so we can remove fake event

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -37,14 +37,9 @@ class @Problem
     # Accessibility helper for sighted keyboard users to show <clarification> tooltips on focus:
     @$('.clarification').focus (ev) =>
       icon = $(ev.target).children "i"
-      iconPos = icon.offset()
-      fakeEvent = jQuery.Event "mouseover", {
-        pageX: iconPos.left + icon.width()/2,
-        pageY: iconPos.top + icon.height()/2
-      }
-      icon.trigger(fakeEvent).trigger "click"
+      window.globalTooltipManager.openTooltip icon
     @$('.clarification').blur (ev) =>
-      $(ev.target).children("i").trigger "mouseout"
+      window.globalTooltipManager.hide()
 
     @bindResetCorrectness()
 

common/static/js/spec/tooltip_manager_spec.js

@@ -76,6 +76,11 @@ describe('TooltipManager', function () {
         expect($('.tooltip')).toBeVisible();
     });
 
+    it('can be be triggered manually', function () {
+        this.tooltip.openTooltip(this.element);
+        expect($('.tooltip')).toBeVisible();
+    });
+
     it('should moves correctly', function () {
         showTooltip(this.element);
         expect($('.tooltip')).toBeVisible();

common/static/js/src/tooltip_manager.js

@@ -46,15 +46,29 @@
         },
 
         showTooltip: function(event) {
-            var tooltipText = $(event.currentTarget).attr('data-tooltip');
+            this.prepareTooltip(event.currentTarget, event.pageX, event.pageY);
+            if (this.tooltipTimer) {
+                clearTimeout(this.tooltipTimer);
+            }
+            this.tooltipTimer = setTimeout(this.show, 500);
+        },
+
+        prepareTooltip: function(element, pageX, pageY) {
+            pageX = typeof pageX !== 'undefined' ? pageX : element.offset().left + element.width()/2;
+            pageY = typeof pageY !== 'undefined' ? pageY : element.offset().top + element.height()/2;
+            var tooltipText = $(element).attr('data-tooltip');
             this.tooltip
                 .html(tooltipText)
-                .css(this.getCoords(event.pageX, event.pageY));
+                .css(this.getCoords(pageX, pageY));
+        },
 
+        // To manually trigger a tooltip to reveal, other than through user mouse movement:
+        openTooltip: function(element) {
+            this.prepareTooltip(element);
+            this.show();
             if (this.tooltipTimer) {
                 clearTimeout(this.tooltipTimer);
             }
-            this.tooltipTimer = setTimeout(this.show, 500);
         },
 
         moveTooltip: function(event) {
@@ -90,6 +104,6 @@
 
     window.TooltipManager = TooltipManager;
     $(document).ready(function () {
-        new TooltipManager(document.body);
+        window.globalTooltipManager = new TooltipManager(document.body);
     });
 }());