Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,24 +2,24 @@ importance: 5

---

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

Write JavaScript that shows atooltip 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 nestedtooltipis shown.
Buradaki göreve benziyor<info:task/behavior-tooltip>,ancak burada gösterilen öğeler iç içe geçmiş olabilir. En içtekitooltipgö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 iniframe:
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.
View file
Open in desktop
Original file line numberDiff line numberDiff 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 trackmouseand call over/out
// mousehareketlerini takip edecek nesne
new HoverIntent({
elem,
over() {
Expand All@@ -38,10 +38,10 @@ new HoverIntent({
});
```

Thedemo:
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 atooltip.
Fareyi "saat" üzerine hızlı bir şekilde hareket ettirirseniz hiçbir şey olmaz ve bunu yavaş yaparsanız veya durdurursanız, birtooltip 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

[8]ページ先頭

©2009-2025 Movatter.jp