Add tooltips

css/style.css

@@ -8,3 +8,4 @@
 @import "tables.css";
 @import "modals.css";
 @import "dropdowns.css";
+@import "tooltips.css";

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);
+}

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>