minor
This commit is contained in:
parent
92d6dc5d48
commit
28a514a0d7
3 changed files with 13 additions and 12 deletions
|
@ -4,10 +4,12 @@ importance: 5
|
|||
|
||||
# Improved tooltip behavior
|
||||
|
||||
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`.
|
||||
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
|
||||
|
||||
That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
|
||||
|
||||
Only one tooltip may show up at the same time.
|
||||
|
||||
For instance:
|
||||
|
||||
```html
|
||||
|
@ -21,5 +23,3 @@ For instance:
|
|||
The result in iframe:
|
||||
|
||||
[iframe src="solution" height=300 border=1]
|
||||
|
||||
P.S. Hint: only one tooltip may show up at the same time.
|
||||
|
|
|
@ -3,16 +3,16 @@ The algorithm looks simple:
|
|||
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.
|
||||
2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
|
||||
3. If the speed is slow, then run `over`.
|
||||
4. Later if we're out of the element, and `over` was executed, run `out`.
|
||||
4. When we're going out of the element, and `over` was executed, run `out`.
|
||||
|
||||
The question is: "How to measure the speed?"
|
||||
But how to measure the speed?
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
|
||||
|
||||
The only way to get coordinates is to listen to mouse events, like `mousemove`.
|
||||
The only way to get coordinates is to listen to mouse events, like `mousemove`, and take coordinates from the event object.
|
||||
|
||||
So we can set a handler on `mousemove` to track coordinates and remember them. Then we can compare them, once per `100ms`.
|
||||
So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
|
||||
|
||||
P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
|
||||
|
|
|
@ -4,16 +4,17 @@ importance: 5
|
|||
|
||||
# "Smart" tooltip
|
||||
|
||||
Write a function that shows a tooltip over an element only if the visitor moves the mouse *over it*, but not *through it*.
|
||||
Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*.
|
||||
|
||||
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?
|
||||
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?
|
||||
|
||||
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.
|
||||
|
||||
Make a universal object `new HoverIntent(options)` for it. With `options`:
|
||||
Make a universal object `new HoverIntent(options)` for it.
|
||||
|
||||
Its `options`:
|
||||
- `elem` -- element to track.
|
||||
- `over` -- a function to call if the mouse is slowly moving over the element.
|
||||
- `over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it.
|
||||
- `out` -- a function to call when the mouse leaves the element (if `over` was called).
|
||||
|
||||
An example of using such object for the tooltip:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue