add link hovering tooltip

AndrewDTR · AndrewDTR · commit 231896cd8c74 · 2024-09-25T18:03:08.000-05:00
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -15,7 +15,7 @@ import "../styles/global.css";
   <body>
     <div class="page-wrapper">
       <Header />
-      
+
       <!-- First slot for content outside the content div -->
       <slot name="outside-content" />
 
@@ -26,6 +26,49 @@ import "../styles/global.css";
 
       <Footer />
     </div>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script
+      id="MathJax-script"
+      async
+      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+    ></script>
+    <div id="tooltip" class="tooltip"></div>
+
+    <script>
+      (function () {
+        const tooltip = document.getElementById("tooltip");
+
+        document.addEventListener("mouseover", function (event) {
+          const target = event.target;
+          if (target.tagName.toLowerCase() === "a") {
+            const href = target.getAttribute("href");
+
+            const link = document.createElement("a");
+            link.href = href;
+
+            if (link.hostname && link.hostname !== location.hostname) {
+              const displayHostname = link.hostname.replace(/^www\./, "");
+
+              tooltip.textContent = displayHostname;
+              tooltip.style.display = "block";
+              tooltip.style.left = event.pageX + 10 + "px";
+              tooltip.style.top = event.pageY + 10 + "px";
+            }
+          }
+        });
+
+        document.addEventListener("mouseout", function (event) {
+          if (event.target.tagName.toLowerCase() === "a") {
+            tooltip.style.display = "none";
+          }
+        });
+
+        document.addEventListener("mousemove", function (event) {
+          if (tooltip.style.display === "block") {
+            tooltip.style.left = event.pageX + 10 + "px";
+            tooltip.style.top = event.pageY + 10 + "px";
+          }
+        });
+      })();
+    </script>
   </body>
 </html>
diff --git a/src/pages/about.md b/src/pages/about.md
@@ -6,6 +6,14 @@ author: Andrew
 tags: ["one", "two", "three"]
 ---
 
+
+<a href="https://sub.example.com/page">External Link with Subdomain</a><br>
+    <a href="https://www.google.com/">Google</a><br>
+    <a href="/local/path">Local Link</a><br>
+    <a href="#section">Anchor Link</a><br>
+    <a href="page.html">Relative Link</a><br>
+
+    
 # h1 Heading 8-)
 ## h2 Heading
 ### h3 Heading
diff --git a/src/pages/index.md b/src/pages/index.md
@@ -6,7 +6,7 @@ author: Andrew
 tags: ["one", "two", "three"]
 ---
 
-Lorem ipsum odor amet, consectetuer adipiscing elit. Sem ac proin erat; efficitur maecenas lobortis tempus. Sed duis euismod ultricies netus arcu magnis rutrum velit. Hac himenaeos finibus lacus nascetur curabitur ornare montes. Nibh ullamcorper risus ligula, leo mauris scelerisque ex felis. Sed pretium gravida volutpat semper nisl primis pellentesque eu torquent. Tempus vulputate efficitur etiam class diam sapien potenti? 
+hey
 
 ```js
 for i in range(0,5)
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,37 +1,49 @@
 * {
-    font-family: "Charter", sans-serif;
-    color: #f0e7d8;
+  font-family: "Charter", sans-serif;
+  color: #f0e7d8;
 }
 
-p, a {
-    font-size: 1.1em;
+p,
+a {
+  font-size: 1.1em;
 }
 body {
-    width: 80%;
-    margin: 0 auto;
-    background-color: #1b1919;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+  width: 80%;
+  margin: 0 auto;
+  background-color: #1b1919;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .page-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .content {
-    flex-grow: 1;
-    width: 80%;
-    margin: 0 auto;
+  flex-grow: 1;
+  width: 80%;
+  margin: 0 auto;
 }
 
-
 footer {
-    margin-top: auto;
+  margin-top: auto;
 }
 
 h1 {
-    font-size: 2.em;
+  font-size: 2em;
+}
+
+.tooltip {
+  position: absolute;
+  background-color: #392e2e;
+  color: #f0e7d8;
+  padding: 5px 8px;
+  font-size: 14px;
+  display: none;
+  pointer-events: none;
+  font-weight: bold;
+  border: 1px solid #f0e7d8;
 }
