Adicionado tooltip no mobile em elementos com atributo title

andifes-isf · Nov 8, 2024 · 597c510 · 597c510
1 parent 76b46ec
commit 597c510
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -161,3 +161,51 @@ const { title, description } = Astro.props;
 		}
 	}
 </style>
+<style is:global>
+:root {
+  --native-tooltip-bg: #fefefe;
+  --native-tooltip-border: rgba(0, 0, 0, 0.7);
+  --native-tooltip-text: #000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --native-tooltip-bg: #292a2d;
+    --native-tooltip-border: rgba(255, 255, 255, 0.7);
+    --native-tooltip-text: #cfd1d4;
+  }
+}
+
+@media (-moz-touch-enabled: 1), (pointer: coarse) {
+  [title] {
+    position: relative;
+  }
+
+  [title]::after {
+    content: attr(title);
+    position: absolute;
+    padding: 3px 5px;
+    font-size: 12px;
+    font-weight: 100;
+    visibility: hidden;
+    white-space: pre-wrap;
+    text-align: left;
+    line-height: 1.4;
+    opacity: 0;
+    transition: opacity 0.3s;
+    border: 1px solid var(--native-tooltip-border);
+    background-color: var(--native-tooltip-bg);
+    color: var(--native-tooltip-text);
+    pointer-events: none;
+    z-index: 100;
+    top: 75%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  [title]:hover::after {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+</style>