|
6 | 6 | <style> |
7 | 7 | body { |
8 | 8 | height: 2000px; |
9 | | - /* the tooltip should work after page scroll too */ |
| 9 | + /* спливаюча підказка також має працювати після прокручування сторінки */ |
10 | 10 | } |
11 | 11 |
|
12 | 12 | .tooltip { |
|
49 | 49 | <body> |
50 | 50 |
|
51 | 51 |
|
52 | | - <div data-tooltip="Here is the house interior" id="house"> |
53 | | - <div data-tooltip="Here is the roof" id="roof"></div> |
| 52 | + <div data-tooltip="Ось – інтер’єр будинку" id="house"> |
| 53 | + <div data-tooltip="Ось – дах" id="roof"></div> |
54 | 54 |
|
55 | | - <p>Once upon a time there was a mother pig who had three little pigs.</p> |
| 55 | + <p>Жила-була мама-свиня, у якої було троє поросят.</p> |
56 | 56 |
|
57 | | - <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."</p> |
| 57 | + <p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав".</p> |
58 | 58 |
|
59 | | - <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p> |
| 59 | + <p>Троє поросят рушили. "Будемо берегти один одного, щоб вовк нас не спіймав", - сказали вони.</p> |
60 | 60 |
|
61 | | - <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p> |
| 61 | + <p>Незабаром вони зустріли чоловіка.<a href="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене вказівник</a></p> |
62 | 62 |
|
63 | 63 | </div> |
64 | 64 |
|
65 | 65 | <script> |
66 | 66 | let tooltip; |
67 | 67 |
|
68 | 68 | document.onmouseover = function(event) { |
69 | | - // important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent |
70 | | - // so mouseover may happen on a child. |
| 69 | + // важливо: миша, що швидко рухається, може "стрибнути" прямо до дочірнього вузла на анотованому вузлі, пропускаючи батьківського |
| 70 | + // тому mouseover може статися на дочірньому елементі. |
71 | 71 |
|
72 | 72 | let anchorElem = event.target.closest('[data-tooltip]'); |
73 | 73 |
|
74 | 74 | if (!anchorElem) return; |
75 | 75 |
|
76 | | - // show tooltip and remember it |
| 76 | + // показати підказку та запам'ятати її |
77 | 77 | tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip); |
78 | 78 | } |
79 | 79 |
|
80 | 80 | document.onmouseout = function() { |
81 | | - // it is possible that mouseout triggered, but we're still inside the element |
82 | | - // (its target was inside, and it bubbled) |
83 | | - // but in this case we'll have an immediate mouseover, |
84 | | - // so the tooltip will be destroyed and shown again |
| 81 | + // можливо, спрацював mouseout, але ми все ще всередині елемента |
| 82 | + // (target цієї події всередині, і подія спливає) |
| 83 | + // але в цьому випадку ми маємо негайне спрацювання події mouseover, |
| 84 | + // тому спливаючу підказку буде знищено та показано знову |
85 | 85 | // |
86 | | - // luckily, the "blinking" won't be visible, |
87 | | - // as both events happen almost at the same time |
| 86 | + // на щастя, "миготіння" не буде видно, |
| 87 | + // оскільки обидві події відбуваються майже одночасно |
88 | 88 | if (tooltip) { |
89 | 89 | tooltip.remove(); |
90 | 90 | tooltip = false; |
|
101 | 101 |
|
102 | 102 | let coords = anchorElem.getBoundingClientRect(); |
103 | 103 |
|
104 | | - // position the tooltip over the center of the element |
| 104 | + // розмістити підказку над центром елемента |
105 | 105 | let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2; |
106 | 106 | if (left < 0) left = 0; |
107 | 107 |
|
|
0 commit comments