Review Moving the mouse: mouseover/out, mouseenter/leave

Author: longo-andrea

2-ui/3-event-details/3-mousemove-mouseover-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 */
+      /* la tooltip dovrebbe continuare a funzionare anche dopo lo scroll della pagina */
     }
 
     .tooltip {
@@ -66,25 +66,25 @@
     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.
+      // importante: un movimento veloce del mouse potrebbe "saltare" direttamente al figlio del nodo, saltando il genitore
+      // quindi il mouseover potrebbe verificarsi su un figlio.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
       if (!anchorElem) return;
 
-      // show tooltip and remember it
+      // mostra una tooltip e ricordala
       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
+      // è possibile che mouseout venga innescato, anche se ci troviamo ancora all'interno dell'elemento
+      // (il target si trova all'interno, e si è diffuso)
+      // ma in questo caso avremo un mouseover immediato,
+      // quindi la tooltip verrà distrutta e mostrata nuovamente
       //
-      // luckily, the "blinking" won't be visible,
-      // as both events happen almost at the same time
+      // fortunatamente, questo non sarà visibile,
+      // poiché questi due eventi avvengono nello stesso istante
       if (tooltip) {
         tooltip.remove();
         tooltip = false;
@@ -101,7 +101,7 @@
 
       let coords = anchorElem.getBoundingClientRect();
 
-      // position the tooltip over the center of the element
+      // posiziona la tooltip al centro dell'elemento
       let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
       if (left < 0) left = 0;
 

2-ui/3-event-details/3-mousemove-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 */
+      /* la tooltip dovrebbe continuare a funzionare anche dopo lo scroll della pagina */
     }
 
     .tooltip {
@@ -63,7 +63,7 @@
   </div>
 
   <script>
-    // ...your code...
+    // ...il vostro codice...
   </script>
 
 </body>

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md

@@ -4,7 +4,7 @@ importance: 5
 
 # Comportamento del tooltip migliorato
 
-Scrivere del codice JavaScript che mostri un tooltip su un elemento con un attributo `data-tooltip`. Il valore di questo attributo dovrebbe rappresentare il testo del tooltip.
+Scrivete del codice JavaScript che mostri un tooltip su un elemento con un attributo `data-tooltip`. Il valore di questo attributo dovrebbe rappresentare il testo del tooltip.
 
 Questo compito è come quello di <info:task/behavior-tooltip>, con la differenza che qui gli elementi delle annotazioni possono essere annidati. Deve essere mostrato il tooltip più annidato.
 

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md

@@ -4,7 +4,7 @@ importance: 5
 
 # "Smart" tooltip
 
-Scrivere una funzione che mostri un tooltip su un elemento solo se l'utente sposta il mouse *su di esso*, e non *attraverso di esso*.
+Scrivete una funzione che mostri un tooltip su un elemento solo se l'utente sposta il mouse *su di esso*, e non *attraverso di esso*.
 
 In altre parole, se il visitatore sposta il mouse su questo elemento e si ferma lì -- mostra il tooltip. Se invece ha solo spostato il mouse passandoci sopra, non ce n'è bisogno, d'altronde chi mai vorrebbe altri elementi lampeggianti non desiderati?