#29 use proper tooltips

Author: rikedyp

docs/array-logic-data-driven-conditionals.md

@@ -5,17 +5,17 @@ APL has logical and comparison functions as in-built primitives. Much like the a
 
 <div class="center language-APL" markdown="span">
 <div class="displayBox" markdown="span">
-<a class="glyph" title="Less than">`<`</a>
-<a class="glyph" title="Less than or equal to">`≤`</a>
-<a class="glyph" title="Equals">`=`</a>
-<a class="glyph" title="Not equals">`≠`</a>
-<a class="glyph" title="Greater than or equal to">`≥`</a>
-<a class="glyph" title="Greater than">`>`</a>
-<a class="glyph" title="Logical AND">`∧`</a>
-<a class="glyph" title="Logical OR">`∨`</a>
-<a class="glyph" title="Logical NAND">`⍲`</a>
-<a class="glyph" title="Logical NOR">`⍱`</a>
-<a class="glyph" title="Logical NOT">`~`</a>
+[`<`](# "Less than"){ .glyph}
+[`≤`](# "Less than or equal to"){ .glyph}
+[`=`](# "Equals"){ .glyph}
+[`≠`](# "Not equals"){ .glyph}
+[`≥`](# "Greater than or equal to"){ .glyph}
+[`>`](# "Greater than"){ .glyph}
+[`∧`](# "Logical AND"){ .glyph}
+[`∨`](# "Logical OR"){ .glyph}
+[`⍲`](# "Logical NAND"){ .glyph}
+[`⍱`](# "Logical NOR"){ .glyph}
+[`~`](# "Logical NOT"){ .glyph}
 </div>
 </div>
 

docs/basic-syntax-and-arithmetic.md

@@ -54,15 +54,15 @@ Some symbols represent both a monadic and a dyadic function, but these are often
 
 <div class="center language-APL" markdown="span">
 <div class="displayBox" markdown="span">
-<a class="glyph" title="Plus">`+`</a>
-<a class="glyph" title="Minus/Negate">`-`</a>
-<a class="glyph" title="Times/Sign">`×`</a>
-<a class="glyph" title="Divide/Inverse">`÷`</a>
-<a class="glyph" title="Residue/Magnitude">`|`</a>
-<a class="glyph" title="Power">`*`</a>
-<a class="glyph" title="Logarithm">`⍟`</a>
-<a class="glyph" title="Max/Ceiling">`⌈`</a>
-<a class="glyph" title="Min/Floor">`⌊`</a>
+[`+`](# "Plus"){ .glyph}
+[`-`](# "Minus/Negate"){ .glyph}
+[`×`](# "Times/Sign"){ .glyph}
+[`÷`](# "Divide/Inverse"){ .glyph}
+[`|`](# "Residue/Magnitude"){ .glyph}
+[`*`](# "Power"){ .glyph}
+[`⍟`](# "Logarithm"){ .glyph}
+[`⌈`](# "Max/Ceiling"){ .glyph}
+[`⌊`](# "Min/Floor"){ .glyph}
 </div>
 </div>
 
@@ -83,9 +83,9 @@ Dyadic functions can map between a single value and an array of values.
 ```
 
 **:bulb: Try this**: Replace the functions in the previous two expressions with:
-<a class="glyph" title="Max">`⌈`</a>
-		<a class="glyph" title="Min">`⌊`</a>
-		<a class="glyph" title="Less than">`<`</a>
+[`⌈`](# "Max"){ .glyph}
+[`⌊`](# "Min"){ .glyph}
+[`<`](# "Less than"){ .glyph}
 
 While experimenting, you may cause a `LENGTH ERROR`:
 

docs/style/main.css

@@ -13,6 +13,7 @@ code {
 .glyph {
 	font-size: 1.5em;
 	cursor: help;
+	padding: 0 3px;
 }
 .md-logo > img{
 	width: 7rem!important;
@@ -39,6 +40,9 @@ code {
 	border: solid 2px var(--md-primary-fg-color); 
 	padding: 0.3em 1em;
 	border-radius: 0.3em;
+	display: flex;
+	justify-content: space-evenly;
+	width: 80%;
 }
 
 /* Code copy only input (see CONTRIBUTING.md) */

mkdocs.yml

@@ -27,6 +27,7 @@ theme:
   logo: 'img/dyalog-white.svg'
   features:
     - navigation.instant
+    - content.tooltips
 extra_css:
   - style/main.css
 extra: