fix(demo): Rename labels and add font tooltip (#95)

Author: DenverCoder1

src/demo/css/style.css

@@ -254,18 +254,27 @@ label.show-border {
   margin-top: 8px;
 }
 
-/* tooltips */
-.btn.tooltip {
+.label-group {
   display: flex;
+  gap: 0.5rem;
+}
+
+a.icon {
+  color: var(--blue-light);
+}
+
+/* tooltips */
+.tooltip {
+  display: inline-flex;
   justify-content: center;
   align-items: center;
 }
 
 /* tooltip bubble */
-.btn.tooltip:before {
+.tooltip:before {
   content: attr(title);
   position: absolute;
-  transform: translateY(-45px);
+  transform: translateY(-2.45rem);
   height: auto;
   width: auto;
   background: #4a4a4afa;
@@ -279,25 +288,25 @@ label.show-border {
 }
 
 /* tooltip bottom triangle */
-.btn.tooltip:after {
+.tooltip:after {
   content: "";
   position: absolute;
-  transform: translateY(-27px);
+  transform: translateY(-1.35rem);
   border-style: solid;
   border-color: #4a4a4afa transparent transparent transparent;
   pointer-events: none;
   opacity: 0;
 }
 
 /* show tooltip on hover */
-.btn.tooltip[title]:hover:before,
-.btn.tooltip[title]:hover:after,
-.btn.tooltip:disabled:hover:before,
-.btn.tooltip:disabled:hover:after {
+.tooltip[title]:hover:before,
+.tooltip[title]:hover:after,
+.tooltip:disabled:hover:before,
+.tooltip:disabled:hover:after {
   transition: 0.2s ease-in opacity;
   opacity: 1;
 }
 
-.btn.tooltip:disabled:before {
+.tooltip:disabled:before {
   content: "You must first input valid text.";
 }

src/demo/index.php

@@ -53,13 +53,21 @@ function gtag() {
 
             <h2>Options</h2>
             <form class="parameters two-columns options">
-                <label for="font">Font</label>
+                <div class="label-group">
+                    <label for="font">Font</label>
+                    <a href="https://fonts.google.com/" target="_blank" class="icon tooltip" title="Enter a font name from Google Fonts">
+                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 6C9.831 6 8.066 7.765 8.066 9.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626-.255.207-.496.404-.691.599C11.029 13.156 11 14.215 11 14.333V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182C15.934 7.765 14.169 6 12 6zM11 16H13V18H11z"></path>
+                            <path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M12,20c-4.411,0-8-3.589-8-8s3.589-8,8-8 s8,3.589,8,8S16.411,20,12,20z"></path>
+                        </svg>
+                    </a>
+                </div>
                 <input class="param" type="text" id="font" name="font" alt="Font name" placeholder="monospace" value="monospace" pattern="^[A-Za-z0-9\- ]*$" title="Font from Google Fonts. Only letters, numbers, and spaces.">
 
                 <label for="size">Font size</label>
                 <input class="param" type="number" id="size" name="size" alt="Font size" placeholder="20" value="20">
 
-                <label for="duration">Print duration (ms per line)</label>
+                <label for="duration">Duration (ms per line)</label>
                 <input class="param" type="number" id="duration" name="duration" alt="Print duration (ms)" placeholder="5000" value="5000">
 
                 <label for="color">Font color</label>
@@ -86,7 +94,7 @@ function gtag() {
                     <option value="true">Each sentence on a new line</option>
                 </select>
 
-                <label for="dimensions" title="Width ✕ Height">W ✕ H</label>
+                <label for="dimensions" title="Width ✕ Height">Width ✕ Height</label>
                 <span id="dimensions">
                     <input class="param inline" type="number" id="width" name="width" alt="Width (px)" placeholder="400" value="400">
                     <label>✕</label>