Skip to content

Commit b8ed7f7

Browse files
author
Roman
committed
Tooltip: (Accessibility) Now it is possible to hover tooltips.
1 parent 4e50ca3 commit b8ed7f7

1 file changed

Lines changed: 38 additions & 1 deletion

File tree

src/elements/Tooltip/Tooltip.coffee

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,45 @@ class CUI.Tooltip extends CUI.LayerPane
103103
node: @_element
104104
call: (ev) =>
105105
@show(ev)
106+
107+
# For accessibility purposes we need to be able to hover the tooltip, so we need this code.
108+
# Only close the tooltip when the mouse is not hovering the element or the tooltip.
109+
mouseHoverTooltip = false
110+
mouseHoverElement = true
111+
hideTimeout = null
112+
hideWhenMouseout = (ev) =>
113+
CUI.clearTimeout(hideTimeout)
114+
hideTimeout = CUI.setTimeout
115+
ms: @_hide_ms + 100 # The default hide ms is 100ms, but we need to add extra 100ms to 'guarantee' the mouse can pass the gap.
116+
call: =>
117+
if mouseHoverTooltip or mouseHoverElement
118+
return
119+
@hide(ev)
120+
return
121+
122+
CUI.Events.listen
123+
type: ["mouseout", "mouseenter"]
124+
capture: true
125+
node: @DOM
126+
call: (ev) =>
127+
mouseHoverTooltip = ev.getType() == "mouseenter"
128+
if not mouseHoverTooltip
129+
hideWhenMouseout(ev)
130+
return
131+
132+
CUI.Events.listen
133+
type: ["mouseout", "mouseenter"]
134+
capture: true
135+
node: @_element
136+
call: (ev) ->
137+
mouseHoverElement = ev.getType() == "mouseenter"
138+
if not mouseHoverElement
139+
hideWhenMouseout(ev)
140+
return
141+
142+
# Hide the tooltip when clicking on it.
106143
CUI.Events.listen
107-
type: ["click", "dblclick", "mouseout"]
144+
type: ["click", "dblclick"]
108145
capture: true
109146
node: @_element
110147
only_once: true

0 commit comments

Comments
 (0)