Add tooltips

KelvinTegelaar · Mar 14, 2024 · 377a662 · 377a662
1 parent f53a348
commit 377a662
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/components/header/AppHeaderSearch.jsx b/src/components/header/AppHeaderSearch.jsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { toggleSwitcher } from 'src/store/features/switcher'
-import { CButton } from '@coreui/react'
+import { CButton, CTooltip } from '@coreui/react'
 import { useDispatch } from 'react-redux'
 
 const AppHeaderSearch = () => {
@@ -12,9 +12,11 @@ const AppHeaderSearch = () => {
   }, [dispatch])
   return (
     <>
-      <CButton variant="ghost" onClick={handleFastSwitcher}>
-        <FontAwesomeIcon icon={faSearch} size="lg" />
-      </CButton>
+      <CTooltip content="Search" placement="bottom">
+        <CButton variant="ghost" onClick={handleFastSwitcher}>
+          <FontAwesomeIcon icon={faSearch} size="lg" />
+        </CButton>
+      </CTooltip>
     </>
   )
 }

diff --git a/src/components/layout/AppHeader.jsx b/src/components/layout/AppHeader.jsx
@@ -9,6 +9,7 @@ import {
   CHeaderToggler,
   CButton,
   CFormSwitch,
+  CTooltip,
 } from '@coreui/react'
 import { AppHeaderSearch } from 'src/components/header'
 import { CippActionsOffcanvas, TenantSelector } from '../utilities'
@@ -137,18 +138,22 @@ const AppHeader = () => {
               target="_blank"
               href={`https://docs.cipp.app/user-documentation${location.pathname}`}
             >
-              <CButton variant="ghost">
-                <FontAwesomeIcon icon={'question'} size="lg" />
-              </CButton>
+              <CTooltip content="Documentation" placement="bottom">
+                <CButton variant="ghost">
+                  <FontAwesomeIcon icon={'question'} size="lg" />
+                </CButton>
+              </CTooltip>
             </a>
           </CNavItem>
           <CNavItem>
             <AppHeaderSearch />
           </CNavItem>
           <CNavItem>
-            <CButton variant="ghost" onClick={() => loadCippQueue()} className="me-1">
-              <FontAwesomeIcon icon={'history'} size="lg" />
-            </CButton>
+            <CTooltip content="Recent Jobs" placement="bottom">
+              <CButton variant="ghost" onClick={() => loadCippQueue()} className="me-1">
+                <FontAwesomeIcon icon={'history'} size="lg" />
+              </CButton>
+            </CTooltip>
           </CNavItem>
           <CNavItem>
             <div className="custom-switch-wrapper primary">