2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mousel…

…eave: Translation P.3
javascript-tutorial · dolgachio · Mar 18, 2024 · Mar 4, 2024 · Mar 8, 2024 · Mar 10, 2024
commit f02c212af428a310ae447afeda61abf620151ac8
diff --git a/...useover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/...useover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* the tooltip should work after page scroll too */
+      /* спливаюча підказка також має працювати після прокручування сторінки */
     }
 
     .tooltip {
@@ -49,42 +49,42 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="Ось – інтер’єр будинку" id="house">
+    <div data-tooltip="Ось – дах" id="roof"></div>
 
-    <p>Once upon a time there was a mother pig who had three little pigs.</p>
+    <p>Жила-була мама-свиня, у якої було троє поросят.</p>
 
-    <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>
+    <p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав".</p>
 
-    <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
+    <p>Троє поросят рушили. "Будемо берегти один одного, щоб вовк нас не спіймав", - сказали вони.</p>
 
-    <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>
+    <p>Незабаром вони зустріли чоловіка.<a href="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене вказівник</a></p>
 
   </div>
 
   <script>
     let tooltip;
 
     document.onmouseover = function(event) {
-      // important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
-      // so mouseover may happen on a child.
+      // важливо: миша, що швидко рухається, може "стрибнути" прямо до дочірнього вузла на анотованому вузлі, пропускаючи батьківського
+      // тому mouseover може статися на дочірньому елементі.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
       if (!anchorElem) return;
 
-      // show tooltip and remember it
+      // показати підказку та запам'ятати її
       tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
     }
 
     document.onmouseout = function() {
-      // it is possible that mouseout triggered, but we're still inside the element
-      // (its target was inside, and it bubbled)
-      // but in this case we'll have an immediate mouseover,
-      // so the tooltip will be destroyed and shown again
+      // можливо, спрацював mouseout, але ми все ще всередині елемента
+      // (target цієї події всередині, і подія спливає)
+      // але в цьому випадку ми маємо негайне спрацювання події mouseover,
+      // тому спливаючу підказку буде знищено та показано знову
       //
-      // luckily, the "blinking" won't be visible,
-      // as both events happen almost at the same time
+      // на щастя, "миготіння" не буде видно,
+      // оскільки обидві події відбуваються майже одночасно
       if (tooltip) {
         tooltip.remove();
         tooltip = false;
@@ -101,7 +101,7 @@
 
       let coords = anchorElem.getBoundingClientRect();
 
-      // position the tooltip over the center of the element
+      // розмістити підказку над центром елемента
       let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
       if (left < 0) left = 0;
 

diff --git a/...mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/...mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* the tooltip should work after page scroll too */
+      /* спливаюча підказка також має працювати після прокручування сторінки */
     }
 
     .tooltip {
@@ -49,21 +49,21 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="Ось – інтер’єр будинку" id="house">
+    <div data-tooltip="Ось – дах" id="roof"></div>
 
-    <p>Once upon a time there was a mother pig who had three little pigs.</p>
+    <p>Жила-була мама-свиня, у якої було троє поросят.</p>
 
-    <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>
+    <p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав".</p>
 
-    <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
+    <p>Троє поросят рушили. "Будемо берегти один одного, щоб вовк нас не спіймав", - сказали вони.</p>
 
-    <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>
+    <p>Незабаром вони зустріли чоловіка.<a href="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене вказівник</a></p>
 
   </div>
 
   <script>
-    // ...your code...
+    // ...ваш код...
   </script>
 
 </body>

diff --git a/...move-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/...move-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
@@ -2,24 +2,24 @@ importance: 5
 
 ---
 
-# Improved tooltip behavior
+# Покращена поведінка спливаючої підказки
 
-Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
+Напишіть JavaScript, який покаже спливаючу підказку над елементом із атрибутом `data-tooltip`. Значення цього атрибута має стати текстом підказки.
 
-That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
+Це як задача <info:task/behavior-tooltip>, але тут елементи можуть бути вкладеними. Ви маєте показати найбільш глибоко вкладену підказку.
 
-Only one tooltip may show up at the same time.
+Одночасно може відображатися лише одна підказка.
 
-For instance:
+Наприклад:
 
 ```html
-<div data-tooltip="Here – is the house interior" id="house">
-  <div data-tooltip="Here – is the roof" id="roof"></div>
+<div data-tooltip="Ось – інтер’єр будинку" id="house">
+  <div data-tooltip="Ось – дах" 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://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене вказівник</a>
 </div>
 ```
 
-The result in iframe:
+Результат в iframe:
 
 [iframe src="solution" height=300 border=1]