novo exercicios sobre api dom, tarefa sobre eventos do mouse over e out e leave e enter

Samuel-Amaro · Samuel-Amaro · commit 6040dbb6bc59 · 2022-07-03T16:25:49.000-03:00
diff --git a/EXE_API_DOM/improved-tooltip-behavior.html b/EXE_API_DOM/improved-tooltip-behavior.html
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8"/>
+    <style>
+        body {
+            height: 2000px;
+            /* a dica de ferramenta deve funcionar após a rolagem da página também */
+        }
+        .tooltip {
+            position: fixed;
+            z-index: 100;
+            padding: 10px 20px;
+            border: 1px solid #b3c9ce;
+            border-radius: 4px;
+            text-align: center;
+            font: italic 14px/1.3 sans-serif;
+            color: #333;
+            background: #fff;
+            box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
+        }
+        #house {
+            margin-top: 50px;
+            width: 400px;
+            border: 1px solid brown;
+        }
+        #roof {
+            width: 0;
+            height: 0;
+            border-left: 200px solid transparent;
+            border-right: 200px solid transparent;
+            border-bottom: 20px solid brown;
+            margin-top: -20px;
+        }
+        p {
+            text-align: justify;
+            margin: 10px 3px;
+        }
+    </style>
+</head>
+<body>
+
+    <div data-tooltip="Here is the house interior" id="house">
+        <div data-tooltip="Here is the roof" 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>
+        <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>
+    
+    </div>
+
+    <script type="text/javascript">
+        /**
+         * Escreva JavaScript que mostre uma dica de ferramenta sobre um elemento com o atributo data-tooltip. O valor desse atributo deve se tornar o texto da dica de ferramenta.
+         * 
+         * É como o comportamento da dica de ferramenta da tarefa , mas aqui os elementos anotados podem ser aninhados. A dica de ferramenta mais profundamente aninhada é mostrada.
+         * 
+         * Apenas uma dica de ferramenta pode aparecer ao mesmo tempo.
+         * 
+         * Por exemplo:
+        */
+
+        let house = document.querySelector("#house");
+
+        function center(elem, tooltip) {
+            let dif = 0, deslo = 0;
+            //verifica coordenadas de deslocamento para centralizar
+            //centralizar tooltip em relação a elem
+            if(elem.offsetWidth > tooltip.offsetWidth) {
+                dif = elem.offsetWidth - tooltip.offsetWidth;
+                deslo = dif / 2;
+                tooltip.style.left = deslo + "px";
+            }else{
+            //centraliza tooltip em relação a elem mesmo elem sendo menor
+                dif = tooltip.offsetWidth - elem.offsetWidth;
+                deslo = dif / 2;
+                tooltip.style.left = tooltip.style.left - deslo > 0 + "px";
+            }
+            
+        }
+
+        function addTooltip(elem, textTooltip) {
+            let desloY = 0;
+            let tooltip = document.createElement("span");
+            tooltip.innerHTML = textTooltip;
+            tooltip.classList.add("tooltip");
+            tooltip.style.visibility = "hidden";
+            document.body.prepend(tooltip);
+            let coordsElem = elem.getBoundingClientRect();
+            //posso mostrar tooltip acima?
+            if(coordsElem.y > tooltip.offsetHeight) {
+                desloY = (coordsElem.y - tooltip.offsetHeight) - 5;
+                tooltip.style.top = desloY > 0 ? desloY + "px" : 0 + "px";
+                tooltip.style.left = coordsElem.x + "px";
+                center(elem, tooltip);
+                tooltip.style.visibility = "visible";
+            }else{
+            //mostra abaixo de elem
+                desloY = (coordsElem.y + elem.offsetHeight) + 5;
+                tooltip.style.top = desloY + "px";
+                tooltip.style.left = coordsElem.x + "px";
+                center(elem, tooltip);
+                tooltip.style.visibility = "visible";
+            }
+        }
+
+        function removeTooltip() {
+            let tooltip = document.querySelector(".tooltip");
+            if(tooltip) {
+                tooltip.remove();
+            }
+        }
+
+        house.addEventListener("mouseover", (event) => {
+            if(event.target.dataset.tooltip) {
+                addTooltip(event.target, event.target.dataset.tooltip);
+            }
+        });
+
+        house.addEventListener("mouseout", (event) => {
+            if(event.target.dataset.tooltip && event.relatedTarget.dataset.tooltip) {
+                removeTooltip();
+                return;
+            }else if(house.contains(event.relatedTarget)) {
+                if(event.relatedTarget.dataset.tooltip) {
+                    removeTooltip();
+                }
+            }else{
+                removeTooltip();
+            }
+        });
+    </script>
+</body>
