Merge pull request #9 from TimDaub/feat/tooltips

Add tooltips

.gitignore

@@ -0,0 +1 @@
+.DS_Store

docs/classless.css

@@ -395,3 +395,20 @@ button[disabled]{ color: var(--cdark); border-color: var(--cmed); }
 .p-1, .px-1, .pl-1 { padding-left:   1.0rem !important; }
 .p-1, .py-1, .pt-1 { padding-top:    1.0rem !important; }
 .p-1, .py-1, .pb-1 { padding-bottom: 1.0rem !important; }
+
+abbr[data-title] { position: relative; text-decoration: underline dotted; cursor: help; }
+@media (max-width:1024px) {
+	abbr[data-title]:hover::before,
+	abbr[data-title]:focus::before {
+		position: absolute;
+		bottom: 2em;
+		width: 10em;
+		padding: .5em .7em;
+		color: var(--cbg);
+		background-color: var(--cfg);
+		box-shadow: .1rem .1rem .4rem 0 var(--cfg);
+		content: attr(data-title);
+		white-space: normal;
+	}
+}
+

docs/index.html

@@ -327,10 +327,13 @@ <h6>Heading 6</h6>
     <h2>Tables</h2>
     <p>The basic HTML tables allow already quite complex layouts. As often seen in professional tables, we omit vertical lines and and only insert horizontal lines as visual separation.</p>
     <div class="row">
-      <div class="col">      
+      <div class="col">
         <table>
           <thead><tr>
-            <th>Head 1</th>  <th>Head 2</th>      
+            <th>
+              Head 1
+            </th>
+            <th>Head 2</th>
           </tr></thead>
           <tbody>
             <tr>
@@ -739,6 +742,18 @@ <h4>Card Heading</h4>
     </div>
     </section>
 
+    <section id="card">
+      <h2>Tooltips</h2>
+      <p>
+        An <code>&lt;abbr&gt;</code> element can have a tooltip by defining
+        the <code>data-title</code> attribute.
+      </p>
+      <abbr data-title="A tooltip that contains text.">A tooltip</abbr>
+      <pre><code>&lt;abbr data-title=&quot;A tooltip that contains text.&quot;&gt;
+  A tooltip
+&lt;/abbr&gt;<code></pre>
+    </section>
+
 
     </article>