Jul 14, 2020 · Jul 12, 2020 · Jul 13, 2020
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
  <style>
    body {
      height: 2000px;
      /*the tooltipshould work after page scroll too */
      /*El tooltipdebe seguir funcionando aúnn después de hacer scroll */
    }

    .tooltip {
    let tooltip;

    document.onmouseover = function(event) {
      //important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
      //somouseovermay happen on a child.
      //Importante: un movimiento rápido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
      //por lo tantomouseoverpodría ejecutarse en un descendiente.

      let anchorElem = event.target.closest('[data-tooltip]');

      if (!anchorElem) return;

      //show tooltip and remember it
      // Mostrando el tooltip y recordándolo.
      tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
    }

    document.onmouseout = function() {
      //it is possible thatmouseouttriggered, but we're still inside the element
      // (its targetwas inside, and it bubbled)
      //but in this case we'll have an immediate mouseover,
      //so the tooltipwill be destroyed and shown again
      //Es posible quemouseoutse active, pero estaremos dentro del elemento
      // (el targetocurrirá dentro y se aparecerá)
      //pero en este caso tendremos un mouse over inmediato,
      //entonces el tooltipserá destruido y mostrado otra vez.
      //
      //luckily, the "blinking" won't be visible,
      //as both events happen almost at the same time
      //Afortunadamente, el parpadeo no es visble,
      //ya que ambos eventos ocurren casi al mismo tiempo.
      if (tooltip) {
        tooltip.remove();
        tooltip = false;

      let coords = anchorElem.getBoundingClientRect();

      //position the tooltipover the center of the element
      //Posicionando el tooltipsobre el centro del elemento
      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
  <style>
    body {
      height: 2000px;
      /*the tooltipshould work after page scroll too */
      /*El tooltipdebe funcionar también despues de hacer scroll */
    }

    .tooltip {
 <body>


  <div data-tooltip="Here is the houseinterior" id="house">
    <div data-tooltip="Here is the roof" id="roof"></div>
  <div data-tooltip="Aquí esta elinterior de la casa" id="house">
    <div data-tooltip="Aquí está el techo" id="roof"></div>

    <p>Once upon a time there was a mother pig who had three little pigs.</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>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</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>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Continúa leyendo…">Colócate sobre mí</a></p>

  </div>

  <script>
    // ...your code...
    // ...tu código...
  </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

 ---

 #Improved tooltip behavior
 #Comportamiento mejorado de un tooltip

 Write JavaScriptthat shows a tooltipover an element with the attribute `data-tooltip`.The value of this attribute should become the tooltip text.
 Escribe JavaScriptque muestre un tooltipsobre un elemento con el atributo `data-tooltip`.El valor de este atributo debe convertirse en el texto del 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.
 Es como la tarea <info:task/behavior-tooltip>,pero aquí los elementos anotados se pueden anidar. Los tooltips más internos se muestran.

 Only one tooltipmay show up at the same time.
 Solamente un tooltippuede aparecer a la vez.

 For instance:
 Por ejemplo:

 ```html
 <div data-tooltip="Here –is the houseinterior" id="house">
  <div data-tooltip="Here –is the roof" id="roof"></div>
 <div data-tooltip="Aquí –está elinterior de la casa" id="house">
  <div data-tooltip="Aquí –está el techo" 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="Continúa leyendo…">Colócate sobre mi</a>
 </div>
 ```

 The result in iframe:
 El resultado en el iframe:

 [iframe src="solution" height=300 border=1]
diff --git a/.../3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md b/.../3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md

 The algorithm looks simple:
 1.Put`onmouseover/out`handlers on the element. Also can use`onmouseenter/leave`here, but they are less universal, won't work if we introduce delegation.
 2.When a mousecursorentered the element, start measuring the speed on `mousemove`.
 3.If the speed is slow, then run `over`.
 4.When we're going out of the element, and `over`was executed, run `out`.
 El algorítmo luce simple:
 1.Coloca los controladores`onmouseover/out`en el elemento. Aquí también podemos usar`onmouseenter/leave`pero son menos universales, no funcionan si introducimos delegaciones.
 2.Cuando elcursoringrese al elemento debes medir la velocidad en `mousemove`.
 3.Si la velocidad es lenta hay que ejecutar `over`.
 4.Si estamos saliendo del elemento, y `over`ya se había ejecutado, ahora ejecutamos `out`.

 But how to measure the speed?
 ¿Pero cómo mediremos la velocidad?

 The first ideacan be: run a function every `100ms`and measure the distance between previous and new coordinates. If it's small, then the speed is small.
 La primera ideapuede ser: correr una función cada `100ms`y medir la distancia entre la coordenada anterior y la actual. Si es pequeña entonces la velocidad fue rápida.

 Unfortunately, there'snoway to get "current mouse coordinates" inJavaScript.There's no function like `getCurrentMouseCoordinates()`.
 Desafortunadamentenohay manera para obtener las coordenadas actuales del mouse enJavaScript.No existe algo así como `getCurrentMouseCoordinates()`.

 The only way to get coordinates is to listen formouse events, like `mousemove`,and take coordinates from the event object.
 La única manera es registrando los eventos delmouse, como `mousemove`,y tomar las coordenadas del objeto del evento.

 So let's set a handler on`mousemove`to track coordinates and remember them. And then compare them, once per `100ms`.
 Entonces configuremos un`mousemove`para registrar las coordenadas y recordarlas. Y entonces las comparamos, una por cada `100ms`.

 P.S. Please note: the solution tests use`dispatchEvent`to see if the tooltipworks right.
 PD. Toma nota: El test de la solución usa`dispatchEvent`para ver si el tooltipfunciona bien.
diff --git a/...emove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/...emove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
 class HoverIntent {

  constructor({
    sensitivity = 0.1, //speed less than 0.1px/msmeans "hovering over an element"
    interval = 100,    //measuremousespeed once per 100ms
    sensitivity = 0.1, //Velocidad menor a 0.1px/mssupone un "posicionamiento sobre el elemento"
    interval = 100,    //Medida de la velocidad delmouseuna vez por cada 100ms
    elem,
    over,
    out
    this.over = over;
    this.out = out;

    //make sure"this"is the object in event handlers.
    //Segurándonos de que"this"es el objeto en los controladores de eventos
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);

    //and in time-measuring function (called from setInterval)
    //y en la función para medir el tiempo  (llamada desde setInterval)
    this.trackSpeed = this.trackSpeed.bind(this);

    elem.addEventListener("mouseover", this.onMouseOver);
  onMouseOver(event) {

    if (this.isOverElement) {
      //if we're over the element, then ignore the event
      //we are already measuring the speed
      //Si estamos sobre el elemento ignoramos el evento
      //Ya estamos midiendo la velocidad
      return;
    }

    this.isOverElement = true;

    // after every mousemovewe'll be check the distance
    //between the previous and the current mouse coordinates
    //if it's less than sensivity, then the speed is slow
    //Después de cada mousemovevamos a checar la distancia
    //entre la coordinada previa y actual del mouse
    //si es menor que sensivity entonces la velocidad es muy rápida

    this.prevX = event.pageX;
    this.prevY = event.pageY;
  }

  onMouseOut(event) {
    //if left the element
    //Si abandomanos el elemento
    if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
      this.isOverElement = false;
      this.elem.removeEventListener('mousemove', this.onMouseMove);
      clearInterval(this.checkSpeedInterval);
      if (this.isHover) {
        //if there was a stop over the element
        //Si nos detenemos sobre el elemento
        this.out.call(this.elem, event);
        this.isHover = false;
      }
    let speed;

    if (!this.lastTime || this.lastTime == this.prevTime) {
      //cursor didn't move
      //Cursor sin movimieto (detenido)
      speed = 0;
    } else {
      speed = Math.sqrt(
      this.isHover = true;
      this.over.call(this.elem, event);
    } else {
      //speed fast, remember new coordinates as the previous ones
      //Hubo movimiento rápido, registramos las coordenadas actuales como las anteriores
      this.prevX = this.lastX;
      this.prevY = this.lastY;
      this.prevTime = this.lastTime;
diff --git a/...usemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js b/...usemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
 'use strict';

 //Here's a briefsketchof the class
 //with things that you'll need anyway
 //Aquí hay un brevesketchcon la clase
 //de cosas que vas a ocupar de cualquier forma
 class HoverIntent {

  constructor({
    sensitivity = 0.1, //speed less than 0.1px/msmeans "hovering over an element"
    interval = 100, //measuremousespeed once per100ms:calculate the distance between previous and next points
    sensitivity = 0.1, //Velocidad menor a 0.1px/mssupone un "posicionamiento sobre el elemento"
    interval = 100, //Medida de la velocidad delmouseuna vez por cada100ms:cualcula la distancia entre el punto anterior y el actual
    elem,
    over,
    out
    this.over = over;
    this.out = out;

    //make sure"this"is the object in event handlers.
    //// Segurándonos de que"this"es el objeto en los controladores de eventos
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);

    //assign the handlers
    //Asignando los controladores
    elem.addEventListener("mouseover", this.onMouseOver);
    elem.addEventListener("mouseout", this.onMouseOut);

    //continue from this point
    //Continua trabajando desde este punto

  }



  destroy() {
    /*your code to "disable" the functionality, remove all handlers */
    /*it's needed for the tests to work*/
    /*Tu código para "deshabilitar" la funcionalidad, remueve los controladores */
    /*Es necesario para que las pruebas funcionen*/
  }

 }
diff --git a/...ails/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/...ails/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
 importance: 5
 Importance: 5

 ---

 #"Smart" tooltip
 #Tooltip "inteligente"

 Write a function that shows a tooltipover an element only if the visitor moves the mouse *to it*,but not *through it*.
 Escribe una función que muestre un tooltipsobre un elemento solamente si el visitante mueve el mouse *hacia él*,pero no *a través de él*.

 In other words, if the visitor moves the mouseto the element and stops there --show the tooltip.And if they just moved themousethrough, then noneed, who wants extra blinking?
 En otras palabras, si el visitante mueve el mousehacia el elemento y para ahí --muestra el tooltip.Y si solamente mueve elmousea través, entonces nolo necesitamos. ¿Quién quiere parpadeos extra?

 Technically, we can measure themousespeed 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.
 Tecnicamente, podemos medir la velocidad delmousesobre el elemento, y si es lenta podemos asumir que el mouse viene "sobre el elemento" y mostramos el tooltip,si es rápida --entonces lo ignoramos.

 Make a universal object`new HoverIntent(options)`for it.
 Hay que crear un objeto universal`new HoverIntent(options)`para ello.

 Its `options`:
 - `elem` --element to track.
 - `over` --a function to call if themousecame to the element: that is, it moves slowly or stopped over it.
 - `out` --a function to call when the mouseleaves the element (if `over`was called).
 Sus `options`:
 - `elem` --elemento a seguir.
 - `over` --una función a llamar si el elmouseviene hacia el elemento: o sea, si viene lentamente o para sobre él.
 - `out` --una función a llmar cuando el mouseabandona el lemento (si `over`fue llamado).

 An example of using such object for the tooltip:
 Un ejemplo de dicho objeto siendo usado para el tooltip:

 ```js
 //a sample tooltip
 // Un tooltip de muestra
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";

 //the object will trackmouseand call over/out
 //El objeto va a rastrear almousey llamar a over/out
 new HoverIntent({
  elem,
  over() {
 });
 ```

 The demo:
 El demo:

 [iframe src="solution" height=140]

 If you move themouseover the "clock" fast then nothing happens, and if you do it slow or stop on them, then there will be a tooltip.
 Si mueves elmousesobre el "reloj" rápido no pasará nada, y si lo haces lento o paras sobre él entonces habrá un tooltip.

 Please note: thetooltipdoesn't "blink" when the cursor moves between the clock subelements.
 Toma en cuenta que eltooltipno "parpadea" cuando el cusor se mueve entre subelementos del reloj.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,7 +6,7 @@
		<style>
		body {
		height: 2000px;
		/the tooltipshould work after page scroll too /
		/El tooltipdebe seguir funcionando aúnn después de hacer scroll /
		}

		.tooltip {
Expand DownExpand Up		@@ -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
		//somouseovermay happen on a child.
		//Importante: un movimiento rápido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
		//por lo tantomouseoverpodría ejecutarse en un descendiente.

		let anchorElem = event.target.closest('[data-tooltip]');

		if (!anchorElem) return;

		//show tooltip and remember it
		// Mostrando el tooltip y recordándolo.
		tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
		}

		document.onmouseout = function() {
		//it is possible thatmouseouttriggered, but we're still inside the element
		// (its targetwas inside, and it bubbled)
		//but in this case we'll have an immediate mouseover,
		//so the tooltipwill be destroyed and shown again
		//Es posible quemouseoutse active, pero estaremos dentro del elemento
		// (el targetocurrirá dentro y se aparecerá)
		//pero en este caso tendremos un mouse over inmediato,
		//entonces el tooltipserá destruido y mostrado otra vez.
		//
		//luckily, the "blinking" won't be visible,
		//as both events happen almost at the same time
		//Afortunadamente, el parpadeo no es visble,
		//ya que ambos eventos ocurren casi al mismo tiempo.
		if (tooltip) {
		tooltip.remove();
		tooltip = false;
Expand All		@@ -101,7 +101,7 @@

		let coords = anchorElem.getBoundingClientRect();

		//position the tooltipover the center of the element
		//Posicionando el tooltipsobre el centro del elemento
		let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
		if (left < 0) left = 0;

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,24 +2,24 @@ importance: 5

		---

		#Improved tooltip behavior
		#Comportamiento mejorado de un tooltip

		Write JavaScriptthat shows a tooltipover an element with the attribute `data-tooltip`.The value of this attribute should become the tooltip text.
		Escribe JavaScriptque muestre un tooltipsobre un elemento con el atributo `data-tooltip`.El valor de este atributo debe convertirse en el texto del 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.
		Es como la tarea <info:task/behavior-tooltip>,pero aquí los elementos anotados se pueden anidar. Los tooltips más internos se muestran.

		Only one tooltipmay show up at the same time.
		Solamente un tooltippuede aparecer a la vez.

		For instance:
		Por ejemplo:

		```html
		<div data-tooltip="Here –is the houseinterior" id="house">
		<div data-tooltip="Here –is the roof" id="roof"></div>
		<div data-tooltip="Aquí –está elinterior de la casa" id="house">
		<div data-tooltip="Aquí –está el techo" 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="Continúa leyendo…">Colócate sobre mi</a>
		</div>
		```

		The result in iframe:
		El resultado en el iframe:

		[iframe src="solution" height=300 border=1]
Original file line number	Diff line number	Diff line change
		@@ -1,18 +1,18 @@

		The algorithm looks simple:
		1.Put`onmouseover/out`handlers on the element. Also can use`onmouseenter/leave`here, but they are less universal, won't work if we introduce delegation.
		2.When a mousecursorentered the element, start measuring the speed on `mousemove`.
		3.If the speed is slow, then run `over`.
		4.When we're going out of the element, and `over`was executed, run `out`.
		El algorítmo luce simple:
		1.Coloca los controladores`onmouseover/out`en el elemento. Aquí también podemos usar`onmouseenter/leave`pero son menos universales, no funcionan si introducimos delegaciones.
		2.Cuando elcursoringrese al elemento debes medir la velocidad en `mousemove`.
		3.Si la velocidad es lenta hay que ejecutar `over`.
		4.Si estamos saliendo del elemento, y `over`ya se había ejecutado, ahora ejecutamos `out`.

		But how to measure the speed?
		¿Pero cómo mediremos la velocidad?

		The first ideacan be: run a function every `100ms`and measure the distance between previous and new coordinates. If it's small, then the speed is small.
		La primera ideapuede ser: correr una función cada `100ms`y medir la distancia entre la coordenada anterior y la actual. Si es pequeña entonces la velocidad fue rápida.

		Unfortunately, there'snoway to get "current mouse coordinates" inJavaScript.There's no function like `getCurrentMouseCoordinates()`.
		Desafortunadamentenohay manera para obtener las coordenadas actuales del mouse enJavaScript.No existe algo así como `getCurrentMouseCoordinates()`.

		The only way to get coordinates is to listen formouse events, like `mousemove`,and take coordinates from the event object.
		La única manera es registrando los eventos delmouse, como `mousemove`,y tomar las coordenadas del objeto del evento.

		So let's set a handler on`mousemove`to track coordinates and remember them. And then compare them, once per `100ms`.
		Entonces configuremos un`mousemove`para registrar las coordenadas y recordarlas. Y entonces las comparamos, una por cada `100ms`.

		P.S. Please note: the solution tests use`dispatchEvent`to see if the tooltipworks right.
		PD. Toma nota: El test de la solución usa`dispatchEvent`para ver si el tooltipfunciona bien.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,8 +3,8 @@
		class HoverIntent {

		constructor({
		sensitivity = 0.1, //speed less than 0.1px/msmeans "hovering over an element"
		interval = 100, //measuremousespeed once per 100ms
		sensitivity = 0.1, //Velocidad menor a 0.1px/mssupone un "posicionamiento sobre el elemento"
		interval = 100, //Medida de la velocidad delmouseuna vez por cada 100ms
		elem,
		over,
		out
Expand All		@@ -15,12 +15,12 @@ class HoverIntent {
		this.over = over;
		this.out = out;

		//make sure"this"is the object in event handlers.
		//Segurándonos de que"this"es el objeto en los controladores de eventos
		this.onMouseMove = this.onMouseMove.bind(this);
		this.onMouseOver = this.onMouseOver.bind(this);
		this.onMouseOut = this.onMouseOut.bind(this);

		//and in time-measuring function (called from setInterval)
		//y en la función para medir el tiempo (llamada desde setInterval)
		this.trackSpeed = this.trackSpeed.bind(this);

		elem.addEventListener("mouseover", this.onMouseOver);
Expand All		@@ -32,16 +32,16 @@ class HoverIntent {
		onMouseOver(event) {

		if (this.isOverElement) {
		//if we're over the element, then ignore the event
		//we are already measuring the speed
		//Si estamos sobre el elemento ignoramos el evento
		//Ya estamos midiendo la velocidad
		return;
		}

		this.isOverElement = true;

		// after every mousemovewe'll be check the distance
		//between the previous and the current mouse coordinates
		//if it's less than sensivity, then the speed is slow
		//Después de cada mousemovevamos a checar la distancia
		//entre la coordinada previa y actual del mouse
		//si es menor que sensivity entonces la velocidad es muy rápida

		this.prevX = event.pageX;
		this.prevY = event.pageY;
Expand All		@@ -52,13 +52,13 @@ class HoverIntent {
		}

		onMouseOut(event) {
		//if left the element
		//Si abandomanos el elemento
		if (!event.relatedTarget \|\| !elem.contains(event.relatedTarget)) {
		this.isOverElement = false;
		this.elem.removeEventListener('mousemove', this.onMouseMove);
		clearInterval(this.checkSpeedInterval);
		if (this.isHover) {
		//if there was a stop over the element
		//Si nos detenemos sobre el elemento
		this.out.call(this.elem, event);
		this.isHover = false;
		}
Expand All		@@ -76,7 +76,7 @@ class HoverIntent {
		let speed;

		if (!this.lastTime \|\| this.lastTime == this.prevTime) {
		//cursor didn't move
		//Cursor sin movimieto (detenido)
		speed = 0;
		} else {
		speed = Math.sqrt(
Expand All		@@ -90,7 +90,7 @@ class HoverIntent {
		this.isHover = true;
		this.over.call(this.elem, event);
		} else {
		//speed fast, remember new coordinates as the previous ones
		//Hubo movimiento rápido, registramos las coordenadas actuales como las anteriores
		this.prevX = this.lastX;
		this.prevY = this.lastY;
		this.prevTime = this.lastTime;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,12 +1,12 @@
		'use strict';

		//Here's a briefsketchof the class
		//with things that you'll need anyway
		//Aquí hay un brevesketchcon la clase
		//de cosas que vas a ocupar de cualquier forma
		class HoverIntent {

		constructor({
		sensitivity = 0.1, //speed less than 0.1px/msmeans "hovering over an element"
		interval = 100, //measuremousespeed once per100ms:calculate the distance between previous and next points
		sensitivity = 0.1, //Velocidad menor a 0.1px/mssupone un "posicionamiento sobre el elemento"
		interval = 100, //Medida de la velocidad delmouseuna vez por cada100ms:cualcula la distancia entre el punto anterior y el actual
		elem,
		over,
		out
Expand All		@@ -17,16 +17,16 @@ class HoverIntent {
		this.over = over;
		this.out = out;

		//make sure"this"is the object in event handlers.
		//// Segurándonos de que"this"es el objeto en los controladores de eventos
		this.onMouseMove = this.onMouseMove.bind(this);
		this.onMouseOver = this.onMouseOver.bind(this);
		this.onMouseOut = this.onMouseOut.bind(this);

		//assign the handlers
		//Asignando los controladores
		elem.addEventListener("mouseover", this.onMouseOver);
		elem.addEventListener("mouseout", this.onMouseOut);

		//continue from this point
		//Continua trabajando desde este punto

		}

Expand All		@@ -44,8 +44,8 @@ class HoverIntent {


		destroy() {
		/your code to "disable" the functionality, remove all handlers /
		/it's needed for the tests to work/
		/Tu código para "deshabilitar" la funcionalidad, remueve los controladores /
		/Es necesario para que las pruebas funcionen/
		}

		}
Original file line number	Diff line number	Diff line change
		@@ -1,31 +1,31 @@
		importance: 5
		Importance: 5

		---

		#"Smart" tooltip
		#Tooltip "inteligente"

		Write a function that shows a tooltipover an element only if the visitor moves the mouse to it,but not through it.
		Escribe una función que muestre un tooltipsobre un elemento solamente si el visitante mueve el mouse hacia él,pero no a través de él.

		In other words, if the visitor moves the mouseto the element and stops there --show the tooltip.And if they just moved themousethrough, then noneed, who wants extra blinking?
		En otras palabras, si el visitante mueve el mousehacia el elemento y para ahí --muestra el tooltip.Y si solamente mueve elmousea través, entonces nolo necesitamos. ¿Quién quiere parpadeos extra?

		Technically, we can measure themousespeed 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.
		Tecnicamente, podemos medir la velocidad delmousesobre el elemento, y si es lenta podemos asumir que el mouse viene "sobre el elemento" y mostramos el tooltip,si es rápida --entonces lo ignoramos.

		Make a universal object`new HoverIntent(options)`for it.
		Hay que crear un objeto universal`new HoverIntent(options)`para ello.

		Its `options`:
		- `elem` --element to track.
		- `over` --a function to call if themousecame to the element: that is, it moves slowly or stopped over it.
		- `out` --a function to call when the mouseleaves the element (if `over`was called).
		Sus `options`:
		- `elem` --elemento a seguir.
		- `over` --una función a llamar si el elmouseviene hacia el elemento: o sea, si viene lentamente o para sobre él.
		- `out` --una función a llmar cuando el mouseabandona el lemento (si `over`fue llamado).

		An example of using such object for the tooltip:
		Un ejemplo de dicho objeto siendo usado para el tooltip:

		```js
		//a sample tooltip
		// Un tooltip de muestra
		let tooltip = document.createElement('div');
		tooltip.className = "tooltip";
		tooltip.innerHTML = "Tooltip";

		//the object will trackmouseand call over/out
		//El objeto va a rastrear almousey llamar a over/out
		new HoverIntent({
		elem,
		over() {
Expand All		@@ -39,10 +39,10 @@ new HoverIntent({
		});
		```

		The demo:
		El demo:

		[iframe src="solution" height=140]

		If you move themouseover the "clock" fast then nothing happens, and if you do it slow or stop on them, then there will be a tooltip.
		Si mueves elmousesobre el "reloj" rápido no pasará nada, y si lo haces lento o paras sobre él entonces habrá un tooltip.

		Please note: thetooltipdoesn't "blink" when the cursor moves between the clock subelements.
		Toma en cuenta que eltooltipno "parpadea" cuando el cusor se mueve entre subelementos del reloj.