From 98d5f44a834c912ff1f5eee68d9e2d6df9babe79 Mon Sep 17 00:00:00 2001
From: Tyson Gern <tyson@initialcapacity.io>
Date: Thu, 23 Nov 2023 18:09:39 -0700
Subject: [PATCH] Add tooltips

---
 css/style.css      |  1 +
 css/tooltips.css   | 36 ++++++++++++++++++++++++++++++++++++
 images/tooltip.svg |  3 +++
 index.html         | 23 ++++++++++++++++++++++-
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 css/tooltips.css
 create mode 100644 images/tooltip.svg

diff --git a/css/style.css b/css/style.css
index 2555fe4..3b5f90f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -8,3 +8,4 @@
 @import "tables.css";
 @import "modals.css";
 @import "dropdowns.css";
+@import "tooltips.css";
diff --git a/css/tooltips.css b/css/tooltips.css
new file mode 100644
index 0000000..2d610c2
--- /dev/null
+++ b/css/tooltips.css
@@ -0,0 +1,36 @@
+[data-tooltip] {
+    --caret-height: .4rem;
+
+    color: var(--text-color);
+    cursor: pointer;
+    text-decoration: underline;
+    position: relative;
+}
+
+[data-tooltip]:hover:before, [data-tooltip]:focus-within:before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + var(--caret-height));
+
+    padding: .33rem .5rem;
+    border-radius: var(--border-radius);
+    background-color: var(--inverted-background-color);
+    width: max-content;
+    max-width: 15rem;
+
+    color: var(--inverted-text-color);
+    font-size: .8rem;
+    line-height: 1.5;
+}
+
+
+[data-tooltip]:hover:after, [data-tooltip]:focus-within:after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 1rem;
+
+    border-left: var(--caret-height) solid transparent;
+    border-right: var(--caret-height) solid transparent;
+    border-top: var(--caret-height) solid var(--inverted-background-color);
+}
diff --git a/images/tooltip.svg b/images/tooltip.svg
new file mode 100644
index 0000000..cf4ea9f
--- /dev/null
+++ b/images/tooltip.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" id="icon">
+    <path style="fill: var(--icon-color)" d="M480-80 374-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H586L480-80ZM160-320h640v-480H160v480Zm0 0v-480 480Z"/>
+</svg>
diff --git a/index.html b/index.html
index 786a64e..feca172 100644
--- a/index.html
+++ b/index.html
@@ -91,6 +91,14 @@ <h2>Sections</h2>
                 Modals
             </a>
         </li>
+        <li>
+            <a href="#tooltips">
+                <svg>
+                    <use xlink:href="images/tooltip.svg#icon"></use>
+                </svg>
+                Tooltips
+            </a>
+        </li>
     </ul>
 
     <h2>Profile</h2>
@@ -123,7 +131,7 @@ <h1>CSS Starter</h1>
     </section>
 
     <section id="typography">
-        <h2>Typography</h2>
+        <h1>Typography</h1>
 
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
@@ -285,6 +293,19 @@ <h2>Warning</h2>
         </dialog>
         <p>Click <a href="javascript:document.querySelector('dialog').showModal()">here</a> to open the modal</p>
     </section>
+    <section id="tooltips">
+        <h1>Tooltips</h1>
+
+        <p>
+            <a href="javascript:{}" data-tooltip="Here is some additional info">Hover over me</a> to see a tooltip.
+        </p>
+
+        <p>
+            <a href="javascript:{}" data-tooltip="Here is some additional info. What do you think of it? I'd say it's very nice.">
+                Hover over me
+            </a> to see a tooltip with a ton of text.
+        </p>
+    </section>
 </main>
 <footer>
     <ul>