add tooltip to the searchbar

client/src/components/LeaderboardFilters/SearchBar.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
 import {
   Box,
   Stack,
@@ -9,8 +10,11 @@ import {
   Divider,
   FormControlLabel,
   Switch,
+  Tooltip,
+  IconButton,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { useDebounce } from "../../hooks/useDebounce";
 
 const SearchBar = ({
@@ -130,10 +134,67 @@ const SearchBar = ({
                       color: "text.secondary",
                       fontWeight: 400,
                       ml: 0.5,
+                      display: isMobile ? "none" : "block",
                     }}
                   >
                     leaderboards
                   </Typography>
+
+                  <Tooltip
+                    title={
+                      <React.Fragment>
+                        <Box sx={{ p: 1, pb: 2 }}>
+                          <Typography
+                            variant="body2"
+                            sx={{ fontWeight: 500, mb: 2 }}
+                          >
+                            How to use search
+                          </Typography>
+                          <ul
+                            style={{
+                              margin: 0,
+                              paddingLeft: "1.5rem",
+                            }}
+                          >
+                            <li>
+                              <b>Simple search</b>: searches for exact text in
+                              leaderboard names
+                            </li>
+                            <li style={{ marginTop: "1rem" }}>
+                              <b>Tag search</b>: use tag prefixes followed by a
+                              value. See all available tags in the{" "}
+                              <Link
+                                to="/submit"
+                                style={{
+                                  color: "#90caf9",
+                                  textDecoration: "none",
+                                  fontWeight: 500,
+                                }}
+                              >
+                                How to submit
+                              </Link>{" "}
+                              page.
+                            </li>
+                          </ul>
+                        </Box>
+                      </React.Fragment>
+                    }
+                    arrow
+                    placement="top"
+                    sx={{ maxWidth: 350 }}
+                  >
+                    <IconButton
+                      size="small"
+                      sx={{
+                        ml: 1.5,
+                        color: "text.secondary",
+                        padding: "2px",
+                        display: isMobile ? "none" : "inline-flex",
+                      }}
+                    >
+                      <InfoOutlinedIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
                 </Box>
 
                 <Divider orientation="vertical" flexItem />