add link hovering tooltip

AndrewDTR · Sep 25, 2024 · 231896c · 231896c
1 parent 955fb42
commit 231896c
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 22 deletions.
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;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -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)
@@ Expand Down @@