Flairs: add tooltip explanation for active flair

frontend/js/src/settings/Settings.tsx

@@ -6,7 +6,8 @@ import { Helmet } from "react-helmet";
 import { findKey, startCase } from "lodash";
 import Select, { OptionProps, components } from "react-select";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import ReactTooltip from "react-tooltip";
 import { ToastMsg } from "../notifications/Notifications";
 import GlobalAppContext from "../utils/GlobalAppContext";
 import { FlairEnum, Flair } from "../utils/constants";
@@ -141,8 +142,16 @@ export default function Settings() {
           <form className="form-group" onSubmit={submitFlairPreferences}>
             <h3>Flair Settings</h3>
             <p>
-              Unlocked by <Link to="/donate/">donating</Link>. Some flairs are
-              only visible on hover.
+              Unlock for a month by <Link to="/donate/">donating</Link>&nbsp;
+              <span
+                data-tip="Flairs will be unlocked for donations of at least $5,<br/>
+                for a duration of one month from the date of donation.<br/>
+                Your flair selection will be saved between donations."
+              >
+                <FontAwesomeIcon icon={faInfoCircle} size="sm" />
+              </span>
+              <ReactTooltip place="bottom" html />. Some flairs are only visible
+              on hover.
             </p>
             <div
               className="flex flex-wrap"