You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -4,10 +4,12 @@ importance: 5
4
4
5
5
# Improved tooltip behavior
6
6
7
-
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`.
7
+
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
8
8
9
9
That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
10
10
11
+
Only one tooltip may show up at the same time.
12
+
11
13
For instance:
12
14
13
15
```html
@@ -21,5 +23,3 @@ For instance:
21
23
The result in iframe:
22
24
23
25
[iframe src="solution" height=300 border=1]
24
-
25
-
P.S. Hint: only one tooltip may show up at the same time.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -3,16 +3,16 @@ The algorithm looks simple:
3
3
1. Put `onmouseover/out` handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation.
4
4
2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
5
5
3. If the speed is slow, then run `over`.
6
-
4.Later if we're out of the element, and `over` was executed, run `out`.
6
+
4.When we're going out of the element, and `over` was executed, run `out`.
7
7
8
-
The question is: "How to measure the speed?"
8
+
But how to measure the speed?
9
9
10
-
The first idea would be: to run our function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
10
+
The first idea can be: run a function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
11
11
12
12
Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
13
13
14
-
The only way to get coordinates is to listen to mouse events, like `mousemove`.
14
+
The only way to get coordinates is to listen to mouse events, like `mousemove`, and take coordinates from the event object.
15
15
16
-
So we can set a handler on `mousemove` to track coordinates and remember them. Then we can compare them, once per `100ms`.
16
+
So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
17
17
18
18
P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
+5-4
Original file line number
Diff line number
Diff line change
@@ -4,16 +4,17 @@ importance: 5
4
4
5
5
# "Smart" tooltip
6
6
7
-
Write a function that shows a tooltip over an element only if the visitor moves the mouse *over it*, but not *through it*.
7
+
Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*.
8
8
9
-
In other words, if the visitor moves the mouse on the element and stopped -- show the tooltip. And if they just moved the mouse through fast, then no need, who wants extra blinking?
9
+
In other words, if the visitor moves the mouse to the element and stops there -- show the tooltip. And if they just moved the mouse through, then no need, who wants extra blinking?
10
10
11
11
Technically, we can measure the mouse speed over the element, and if it's slow then we assume that it comes "over the element" and show the tooltip, if it's fast -- then we ignore it.
12
12
13
-
Make a universal object `new HoverIntent(options)` for it. With `options`:
13
+
Make a universal object `new HoverIntent(options)` for it.
14
14
15
+
Its `options`:
15
16
-`elem` -- element to track.
16
-
-`over` -- a function to call if the mouse is slowly moving over the element.
17
+
-`over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it.
17
18
-`out` -- a function to call when the mouse leaves the element (if `over` was called).
0 commit comments