Add tooltip beside city refinement search box

components/search/bills/BillSearch.tsx

@@ -22,7 +22,8 @@ import { useBillRefinements } from "./useBillRefinements"
 import { SortBy, SortByWithConfigurationItem } from "../SortBy"
 import { getServerConfig } from "../common"
 import { useBillSort } from "./useBillSort"
-import { FC } from "react"
+import { FC, RefObject, useEffect, useRef } from "react"
+import { QuestionTooltip } from "components/tooltip"
 
 const searchClient = new TypesenseInstantSearchAdapter({
   server: getServerConfig(),
@@ -73,13 +74,52 @@ const useSearchStatus = () => {
   }
 }
 
+const addToolTipForCity = (nodeRef: RefObject<HTMLDivElement>) => {
+  // fetch the city search refinement form
+  const citySearch = document.querySelector<HTMLFormElement>(".city-search form")!;
+  citySearch?.setAttribute("style", "gap: 5px;");
+  // fetch the city search refinement form input
+  const input = document.querySelector<HTMLFormElement>(".city-search form .ais-SearchBox-input")!;
+  input?.setAttribute("style", "padding-right: 0");
+  // create the tool tip div to be added beside the input
+  const toolTip = document.createElement("div")!;
+  toolTip.classList.add(".city-tooltip");
+  toolTip.style.margin = "auto 0";
+  // add the tooltip div at the beginning of the form
+  citySearch?.prepend(toolTip);
+  // add the component to the div using the ref
+  toolTip.append(nodeRef?.current!);
+}
+
 const Layout: FC<
   React.PropsWithChildren<{ items: SortByWithConfigurationItem[] }>
 > = ({ items }) => {
   const refinements = useBillRefinements()
   const status = useSearchStatus()
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  // add the tooltip beside city refinement box on page load
+  useEffect(() => {
+    addToolTipForCity(nodeRef); 
+  }, []);
+
   return (
     <SearchContainer>
+      <QuestionTooltip placement={"top"} nodeRef={nodeRef}>
+        <p className="mb-0">
+          This filter only captures bills submitted via the
+          {" "}
+          <a
+            className="text-light"
+            href="https://www.somervillecdc.org/news/what-is-a-home-rule-petition/#:~:text=A%20Home%20Rule%20Petition%20is,an%20aspect%20of%20state%20law"
+            target="_blank"
+          >
+            home rule
+          </a>
+          {" "}
+          petition; not every bill that concerns a city
+        </p>
+      </QuestionTooltip>
       <Row>
         <SearchBox placeholder="Search For Bills" className="mt-2 mb-3" />
       </Row>

components/search/bills/useBillRefinements.tsx

@@ -30,6 +30,7 @@ export const useBillRefinements = () => {
     useRefinementListUiProps({
       attribute: "city",
       searchablePlaceholder: "City",
+      className: "city-search",
       ...baseProps
     }),
     useRefinementListUiProps({

components/tooltip.tsx

@@ -1,22 +1,43 @@
 import "@fortawesome/fontawesome-svg-core/styles.css"
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import React from "react"
+import React, { FC, RefObject, useState } from "react"
 import { OverlayTrigger, Tooltip } from "react-bootstrap"
+import { Placement } from "react-bootstrap/esm/types"
 
-export const QuestionTooltip = ({ text }: { text: string }) => {
+export const QuestionTooltip: FC<
+  React.PropsWithChildren<{
+    placement: Placement,
+    nodeRef: RefObject<HTMLDivElement>
+  }>
+> = ({ placement, nodeRef, children }) => {
+  const [show, setShow] = useState(false);
+  const onMouseOver = (s: boolean) => setShow(s);
   return (
-    <OverlayTrigger
-      placement="auto"
-      overlay={
-        <Tooltip id="tooltip-text">
-          <p>{text}</p>
-        </Tooltip>
-      }
-    >
-      <span className="m-1">
-        <FontAwesomeIcon icon={faQuestionCircle} className="text-secondary" />
-      </span>
-    </OverlayTrigger>
+    <div ref={nodeRef}>
+      <OverlayTrigger
+        show={show}
+        placement={placement}
+        overlay={
+          <Tooltip
+            onMouseEnter={() => onMouseOver(true)}
+            onMouseLeave={() => onMouseOver(false)}
+            id="tooltip-text"
+          >
+            {children}
+          </Tooltip>
+        }
+      >
+        <span className="m-1">
+          <FontAwesomeIcon
+            onMouseEnter={() => onMouseOver(true)}
+            onMouseLeave={() => onMouseOver(false)}
+            size={"lg"}
+            icon={faQuestionCircle}
+            className="text-secondary" 
+          />
+        </span>
+      </OverlayTrigger>
+    </div>
   )
 }