diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee index fdaafd4c51..f18963b9ba 100644 --- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/capa/display.coffee @@ -37,14 +37,9 @@ class @Problem # Accessibility helper for sighted keyboard users to show 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() diff --git a/common/static/js/spec/tooltip_manager_spec.js b/common/static/js/spec/tooltip_manager_spec.js index e4f0234489..c4011b1f95 100644 --- a/common/static/js/spec/tooltip_manager_spec.js +++ b/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(); diff --git a/common/static/js/src/tooltip_manager.js b/common/static/js/src/tooltip_manager.js index ae7bc6e87c..83eba8cad3 100644 --- a/common/static/js/src/tooltip_manager.js +++ b/common/static/js/src/tooltip_manager.js @@ -46,17 +46,31 @@ }, showTooltip: function(event) { - var tooltipText = $(event.currentTarget).attr('data-tooltip'); - this.tooltip - .html(tooltipText) - .css(this.getCoords(event.pageX, event.pageY)); - + 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(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); + } + }, + moveTooltip: function(event) { this.tooltip.css(this.getCoords(event.pageX, event.pageY)); }, @@ -90,6 +104,6 @@ window.TooltipManager = TooltipManager; $(document).ready(function () { - new TooltipManager(document.body); + window.globalTooltipManager = new TooltipManager(document.body); }); }());