4-behavior-tooltip

dandgerson · dandgerson · commit a49277fc773d · 2019-05-30T15:46:12.000+03:00
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* make body scrollable, the tooltip should work after the scroll */
+      /* доавим body прокрутку, подсказка должна работать и с прокруткой */
     }
 
     .tooltip {
@@ -25,13 +25,13 @@
 
 <body>
 
-  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
-  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
+  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
 
-  <button data-tooltip="the tooltip is longer than the element">Short button</button>
-  <button data-tooltip="HTML<br>tooltip">One more button</button>
+  <button data-tooltip="эта подсказка должна быть длиннее, чем элемент">Маленькая кнопка</button>
+  <button data-tooltip="HTML<br>подсказка">Ещё одна</button>
 
-  <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
+  <p>Прокрутите страницу, чтобы кнопки оказались сверху, проверьте правильно ли выводятся подсказки.</p>
 
 
   <script>
@@ -40,25 +40,25 @@
     document.onmouseover = function(event) {
       let target = event.target;
 
-      // if we have tooltip HTML...
+      // получим содержимое подсказки...
       let tooltipHtml = target.dataset.tooltip;
       if (!tooltipHtml) return;
 
-      // ...create the tooltip element
+      // ...создадим элемент подсказки
 
       tooltipElem = document.createElement('div');
       tooltipElem.className = 'tooltip';
       tooltipElem.innerHTML = tooltipHtml;
       document.body.append(tooltipElem);
 
-      // position it above the annotated element (top-center)
+      // спозиционируем его сверху от аннотируемого элемента (top-center)
       let coords = target.getBoundingClientRect();
 
       let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
-      if (left < 0) left = 0; // don't cross the left window edge
+      if (left < 0) left = 0; // не заезжать за левый край окна
 
       let top = coords.top - tooltipElem.offsetHeight - 5;
-      if (top < 0) { // if crossing the top window edge, show below instead
+      if (top < 0) { // если подсказка не помещается сверху, то отображать её снизу
         top = coords.top + target.offsetHeight + 5;
       }
 
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
@@ -6,11 +6,11 @@
   <style>
     body {
       height: 2000px;
-      /* make body scrollable, the tooltip should work after the scroll */
+      /* доавим body прокрутку, подсказка должна работать и с прокруткой */
     }
 
     .tooltip {
-      /* some styles for the tooltip, you can use your own instead */
+      /* немного стилизуем подсказку, можете использовать свои вместо этих */
       position: fixed;
       padding: 10px 20px;
       border: 1px solid #b3c9ce;
@@ -26,17 +26,17 @@
 
 <body>
 
-  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
-  <p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
+  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
+  <p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
 
-  <button data-tooltip="the tooltip is longer than the element">Short button</button>
-  <button data-tooltip="HTML<br>tooltip">One more button</button>
+  <button data-tooltip="эта подсказка должна быть длиннее, чем элемент">Маленькая кнопка</button>
+  <button data-tooltip="HTML<br>подсказка">Ещё одна</button>
 
-  <p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
+  <p>Прокрутите страницу, чтобы кнопки оказались сверху, проверьте правильно ли выводятся подсказки.</p>
 
 
   <script>
-    // ...your code...
+    // ...ваш код...
   </script>
 
 </body>
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
@@ -2,35 +2,35 @@ importance: 5
 
 ---
 
-# Tooltip behavior
+# Поведение "подсказка"
 
-Create JS-code for the tooltip behavior.
+Напишите JS-код, чтобы придать подсказке поведение.
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+При наведении мыши на элемент с атрибутом `data-tooltip`, над ним должна показываться подсказка и скрываться при переходе на другой элемент.
 
-An example of annotated HTML:
+Пример аннотированного HTML:
 ```html
-<button data-tooltip="the tooltip is longer than the element">Short button</button>
-<button data-tooltip="HTML<br>tooltip">One more button</button>
+<button data-tooltip="эта подсказка длиннее, чем элемент">Короткая кнопка</button>
+<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
 ```
 
-Should work like this:
+Результат в ифрейме с документом:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags.
+В этой задаче можно полагать, что в элементе с атрибутом `data-tooltip` -- только текст, то есть нет подэлементов.
 
-Details:
+Детали оформления:
 
-- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху -- показывать снизу элемента.
+- Текст подсказки брать из значения атрибута `data-tooltip`. Это может быть произвольный HTML.
 
-You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+Для решения вам понадобятся два события:
+- `mouseover` срабатывает, когда указатель мыши заходит на элемент.
+- `mouseout` срабатывает, когда указатель мыши уходит с элемента.
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+Примените делегацию событий: установите оба обработчика на элемент `document`, чтобы отслеживать "заход" и "уход" курсора на элементы с атрибутом `data-tooltip` и управлять подсказками с их же помощью.
 
-After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+После реализации поведения -- люди, даже не знакомые с JavaScript смогут аннотировать элементы.
 
-P.S. To keep things natural and simple: only one tooltip may show up at a time.
+P.S. Чтобы всё выглядело естественно и просто: показывайте одновременно лишь одну подсказку.
