Skip to content

Moving the mouse: mouseover/out, mouseenter/leave #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 22, 2021
Merged

Moving the mouse: mouseover/out, mouseenter/leave #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef12202
Moving the mouse: mouseover/out, mouseenter/leave
bilgedemirkaya Jan 22, 2021
2e57d90
Update article.md
bilgedemirkaya Jan 22, 2021
15b355a
Update task.md
bilgedemirkaya Jan 22, 2021
697ec58
Update hoverintent
bilgedemirkaya Jan 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions ...move-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ importance: 5

---

# Improved tooltip behavior
# Geliştirilmiş ipucu (tooltip) davranışı

Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`.
Fare ile bir elementin üzerinden geçildiğinde `data-tooltip` özelliği ile beraber tooltip (ipucu) gösteren bir javaScript kodu yazın.

That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
Buradaki göreve benziyor <info:task/behavior-tooltip>, ancak burada gösterilen öğeler iç içe geçmiş olabilir. En içteki tooltip gösterilmelidir.

For instance:
Örneğin:

```html
<div data-tooltip="Here – is the house interior" id="house">
<div data-tooltip="Here – is the roof" id="roof"></div>
...
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Fare ile buranın üzerine gel</a>
</div>
```

The result in iframe:
Sonuç iframe üzerinde:

[iframe src="solution" height=300 border=1]

P.S. Hint: only one tooltip may show up at the same time.
Not ipucu: aynı anda yalnızca bir araç ipucu (tooltip) görünebilir.
28 changes: 14 additions & 14 deletions ...ails/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,29 @@ importance: 5

---

# "Smart" tooltip
# "Akıllı" tooltip

Write a function that shows a tooltip over an element only if the visitor moves the mouse *over it*, but not *through it*.
Kullanıcı fareyle bir elementin *üzerinden geçtiğinde* ancak *üzerinden geçip gitmediğinde* tooltip (ipucu) gösteren bir fonksiyon yazın.

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?
Diğer kelimelerle, eğer kullanıcı faresiyle bir ögenin üzerine gelirse ve durursa -- tooltipi göster. Ancak eğer faresiyle bu ögenin üzerinden hızlıca geçip giderse, tooltip gösterme.

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.
Teknik olarak, bir öğenin üzerindeki fare hızını ölçebiliriz, eğer hızı yavaşsa biz bunu elementin üzerinden geçiyor kabul ederek tooltipi göstermeliyiz. Hızı fazla ise o zaman görmezden gelmeliyiz.

Make a universal object `new HoverIntent(options)` for it. With `options`:
Bunun için global obje `new HoverIntent(options)` yap. `options` (seçenekler) ile beraber:

- `elem` -- element to track.
- `over` -- a function to call if the mouse is slowly moving over the element.
- `out` -- a function to call when the mouse leaves the element (if `over` was called).
- `elem` -- Takip edilecek element.
- `over` -- Eğer fare elementin üzerinden yavaşca geçiyorsa çağırılacak fonksiyon.
- `out` -- Fare elementin üzerinden ayrıldığı zaman çağırılacak fonksiyon (eğer `over` çağırıldıysa).

An example of using such object for the tooltip:
Tooltip için böyle bir objeyi kullanmaya bir örnek:

```js
// a sample tooltip
// örnek tooltip
let tooltip = document.createElement('div');
tooltip.className = "tooltip";
tooltip.innerHTML = "Tooltip";

// the object will track mouse and call over/out
// mouse hareketlerini takip edecek nesne
new HoverIntent({
elem,
over() {
Expand All @@ -38,10 +38,10 @@ new HoverIntent({
});
```

The demo:
demo:

[iframe src="solution" height=140]

If you move the mouse over the "clock" fast then nothing happens, and if you do it slow or stop on them, then there will be a tooltip.
Fareyi "saat" üzerine hızlı bir şekilde hareket ettirirseniz hiçbir şey olmaz ve bunu yavaş yaparsanız veya durdurursanız, bir tooltip gösterecektir.

Please note: the tooltip doesn't "blink" when the cursor moves between the clock subelements.
Lütfen dikkat: imleç saat alt öğeleri arasında hareket ettiğinde tooltip "gelip gitmez".
Loading