Skip to content

Commit 17ce1f9

Browse files
author
Maksumi Murakami
committed
Traducción lista de Moviendo el mouse
1 parent 4f23a61 commit 17ce1f9

8 files changed

Lines changed: 149 additions & 149 deletions

File tree

‎2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<style>
77
body {
88
height: 2000px;
9-
/* the tooltip should work after page scroll too */
9+
/* El tooltip debe funcionar también despues de hacer scroll */
1010
}
1111

1212
.tooltip {
@@ -66,25 +66,25 @@
6666
let tooltip;
6767

6868
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+
// Importante: un movimiento ráido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
70+
// por lo tanto mouseover podría ejecutarse en un descendiente.
7171

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

7474
if (!anchorElem) return;
7575

76-
// show tooltip and remember it
76+
// Mostrando el tooltip y recordandolo
7777
tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
7878
}
7979

8080
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+
// es posible que mouseout se active, pero estaremos dentro del elemento
82+
// (el target ocurrira dentro y se aparecera)
83+
// pero en este caso tendremos un mouse over inmediato,
84+
// entonces el tooltip será destruido y mostrado otra vez
8585
//
86-
// luckily, the "blinking" won't be visible,
87-
// as both events happen almost at the same time
86+
// afortunadamente, el parpadeo no es visble,
87+
// ya que ambos eventos ocurren casi al mismo tiempo.
8888
if (tooltip) {
8989
tooltip.remove();
9090
tooltip = false;
@@ -101,7 +101,7 @@
101101

102102
let coords = anchorElem.getBoundingClientRect();
103103

104-
// position the tooltip over the center of the element
104+
// Posicionando el tooltip sobre el centro del elemento
105105
let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
106106
if (left < 0) left = 0;
107107

‎2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<style>
77
body {
88
height: 2000px;
9-
/* the tooltip should work after page scroll too */
9+
/* El tooltip debe funcionar también despues de hacer scroll */
1010
}
1111

1212
.tooltip {
@@ -49,21 +49,21 @@
4949
<body>
5050

5151

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="Aquí esta el interior de la casa" id="house">
53+
<div data-tooltip="Aquí está el techo" id="roof"></div>
5454

5555
<p>Once upon a time there was a mother pig who had three little pigs.</p>
5656

5757
<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."
5858

5959
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
6060

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>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>
6262

6363
</div>
6464

6565
<script>
66-
// ...your code...
66+
// ...tu codigo...
6767
</script>
6868

6969
</body>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@ importance: 5
22

33
---
44

5-
# Improved tooltip behavior
5+
# Comportamiento mejorado de un tooltip
66

7-
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
7+
Escribe JavaScript que muestre un tooltip sobre un elemento con el atributo `data-tooltip`. El valor de este atributo debe convertirse en el texto del tooltip.
88

9-
That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
9+
Es como la tarea <info:task/behavior-tooltip>, pero aquí los elementos anotados se pueden anidar. Los tooltips más internos se muestran.
1010

11-
Only one tooltip may show up at the same time.
11+
Solamente un tooltip puede aparecer a la vez.
1212

13-
For instance:
13+
Por ejemplo:
1414

1515
```html
16-
<div data-tooltip="Here – is the house interior" id="house">
17-
<div data-tooltip="Here – is the roof" id="roof"></div>
16+
<div data-tooltip="Aquí – está el interior de la casa" id="house">
17+
<div data-tooltip="Aquí – está el techo" id="roof"></div>
1818
...
19-
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
19+
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Continúa leyendo…">Colócate sobre mi</a>
2020
</div>
2121
```
2222

23-
The result in iframe:
23+
El resultado en el iframe:
2424

2525
[iframe src="solution" height=300 border=1]

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
importance: 5
1+
Importancia: 5
22

33
---
44

5-
# "Smart" tooltip
5+
# Tooltip "inteligente"
66

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

9-
In other words, if the visitor moves the mouse to the element and stops there -- show the tooltip. And if they just moved the mouse through, then no need, who wants extra blinking?
9+
En otras palabras, si el visitante mueve el mouse hacia el elemento y para ahí -- muestra el tooltip. Y si solamente mueve el mouse a través, entonces no lo necesitamos. ¿Quién quiere parpadeos extra?
1010

11-
Technically, we can measure the mouse speed 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.
11+
Tecnicamente, podemos medir la velocidad del mouse sobre 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.
1212

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

15-
Its `options`:
16-
- `elem` -- element to track.
17-
- `over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it.
18-
- `out` -- a function to call when the mouse leaves the element (if `over` was called).
15+
Sus `options`:
16+
- `elem` -- elemento a seguir.
17+
- `over` -- una función a llamar si el el mouse viene hacia el elemento: o sea, si viene lentamente o para sobre él.
18+
- `out` -- una función a llmar cuando el mouse abandona el lemento (si `over` fue llamado).
1919

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

2222
```js
23-
// a sample tooltip
23+
// un tooltip de muestra
2424
let tooltip = document.createElement('div');
2525
tooltip.className = "tooltip";
2626
tooltip.innerHTML = "Tooltip";
2727

28-
// the object will track mouse and call over/out
28+
// el obeto va a rastrear al mouse y llamar a over/out
2929
new HoverIntent({
3030
elem,
3131
over() {
@@ -39,10 +39,10 @@ new HoverIntent({
3939
});
4040
```
4141

42-
The demo:
42+
El demo:
4343

4444
[iframe src="solution" height=140]
4545

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

48-
Please note: the tooltip doesn't "blink" when the cursor moves between the clock subelements.
48+
Toma en cuenta que el tooltip no "parpadea" cuando el cusor se mueve entre subelementos del reloj.

0 commit comments

Comments
 (0)