Button tooltips

src/components/navbar.js

@@ -6,7 +6,10 @@ import {
   FaStepForward,
   FaBackward,
   FaStepBackward,
+  // FaInfoCircle,
+  FaRegCheckSquare,
 } from "react-icons/fa";
+import { BsInfoCircleFill } from "react-icons/bs";
 import { SearchBar, SearchBarPresentation } from "./search-bar";
 import { navigate } from "gatsby";
 
@@ -91,6 +94,7 @@ const Navbar = (props) => {
     doc.write("</body></html>");
     doc.close();
     myWindow.focus(); // necessary for IE >= 10*/
+    myWindow.print();
   };
 
   const handleFontSize = (e, param) => {
@@ -105,12 +109,12 @@ const Navbar = (props) => {
         fontSize.current -= 20;
       }
     }
-    
+
     const element = document.getElementById("print-section");
     if (fontSize.current === 100) {
-        element.classList.add("print-section__font-size");
+      element.classList.add("print-section__font-size");
     } else {
-        element.classList.remove("print-section__font-size");
+      element.classList.remove("print-section__font-size");
     }
     element.style.fontSize = `${fontSize.current}%`;
   };
@@ -137,27 +141,31 @@ const Navbar = (props) => {
             aria-label="Skip to first page"
             className="navbar__button"
             onClick={(e) => handleClick(e, "fast-backward")}
+            title="First"
           >
             <FaStepBackward />
           </button>
           <button
             aria-label="Previous Page"
             className="navbar__button"
             onClick={(e) => handleClick(e, "backward")}
+            title="Previous"
           >
             <FaBackward />
           </button>
           <button
             aria-label="Next Page"
             className="navbar__button"
             onClick={(e) => handleClick(e, "forward")}
+            title="Next"
           >
             <FaForward />
           </button>
           <button
             aria-label="Skip to last page"
             className="navbar__button"
             onClick={(e) => handleClick(e, "fast-forward")}
+            title="Last"
           >
             <FaStepForward />
           </button>
@@ -168,6 +176,7 @@ const Navbar = (props) => {
             onClick={(e) => {
               handleFontSize(e, "increase");
             }}
+            title="Increase Font Size"
           >
             <FaFont />
             <span
@@ -186,6 +195,7 @@ const Navbar = (props) => {
             onClick={(e) => {
               handleFontSize(e, "decrease");
             }}
+            title="Decrease Font Size"
           >
             <FaFont />
             <span
@@ -202,9 +212,39 @@ const Navbar = (props) => {
             aria-label="Print Page"
             className="navbar__button"
             onClick={handlePrint}
+            title="Print"
           >
             <FaPrint />
           </button>
+          <button
+            aria-label="Print Information"
+            className="navbar__button tooltip"
+            style={{
+              margin: "0px",
+              fontSize: "14px",
+              verticalAlign: "super",
+              paddingLeft: "3px",
+            }}
+          >
+            <BsInfoCircleFill />
+            <span class="tooltiptext" aria-hidden="true" role="tooltip">
+              <ul class="tooltiptext__list">
+                <li>
+                  To print the current page, click the print &nbsp;
+                  <FaPrint />
+                  &nbsp; icon.
+                </li>
+                <li>
+                  To print multiple pages, select the checkboxes &nbsp;
+                  <FaRegCheckSquare />
+                  &nbsp; in the left pane (or in the page menu below on mobile)
+                  for the pages you want to print and click the print &nbsp;
+                  <FaPrint />
+                  &nbsp; icon.
+                </li>
+              </ul>
+            </span>
+          </button>
         </div>
       </div>
     </nav>

src/components/search-bar.js

@@ -27,6 +27,7 @@ export const SearchBarPresentation = (props) => {
           type="submit"
           className="navbar__button search"
           style={{ color: "white" }}
+          title="Search"
         >
           <span className="sr-only">Search</span>
           <img src={SearchIcon} style={{ color:"white", height:"1rem", width:"1rem", maxWidth:"initial" }} />

src/styles/components/_navbar.scss

@@ -19,7 +19,7 @@
     width: 50%;
   }
 
-  @include media(lg) { 
+  @include media(lg) {
     width: initial;
     margin-right: auto;
     margin-left: auto;
@@ -53,6 +53,9 @@
 .navbar__search-input {
   border: solid 1px $brand-primary;
   border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   width: 100%;
   height: 2rem;
   padding: 8px;
@@ -69,11 +72,61 @@
 .navbar__buttons {
   padding: 0;
 
-  @include media(lg){
+  @include media(lg) {
     padding-left: 20px;
   }
 }
 
+.tooltip {
+  position: relative;
+}
+
+.tooltip .tooltiptext {
+  background: #fff;
+  color: #000;
+  box-shadow: 0 0 8px rgb(32 32 32 / 50%);
+  font-size: 0.875rem;
+  width: 50vw;
+  padding: 0.5rem;
+  position: absolute;
+  right: -3px;
+  top: 25px;
+  visibility: hidden;
+  text-align: left;
+  border-radius: 0;
+  z-index: 15;
+
+  @include media(sm) {
+    width: 50vw;
+    right: 0;
+    left: 22px;
+    top: 0px;
+  }
+
+  @include media(md) {
+    width: 30vw;
+  }
+
+  @include media(lg) {
+    width: 20vw;
+  }
+}
+
+.tooltip:hover .tooltiptext,
+.tooltip:focus .tooltiptext {
+  visibility: visible;
+}
+
+.tooltiptext__list {
+  margin: 0;
+  padding: 0;
+  padding-left: 22px;
+
+  & li {
+    margin: 0;
+  }
+}
+
 .navbar__button {
   font-size: 1.125em;
   background-color: unset;
@@ -94,7 +147,7 @@
     }
   }
 
-  &:hover{
+  &:hover {
     color: $navy;
   }
 }