tooltip for calculation source

LMacPhail · Dec 12, 2023 · dd5d5d1 · dd5d5d1
1 parent cf3886f
commit dd5d5d1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/components/content/About.tsx b/src/components/content/About.tsx
@@ -42,6 +42,20 @@ const faqs: { question: string; answer: JSX.Element }[] = [
       </p>
     ),
   },
+  {
+    question: ' How have you calculated "chance of winning"?',
+    answer: (
+      <p>
+        Our measure is based on the Electoral Calculus "chance of winning"
+        measure{" "}
+        <TextLink link="https://www.electoralcalculus.co.uk/fcgi-bin/calcwork23.py?seat=Glasgow+North+East">
+          (see an example here)
+        </TextLink>
+        . We have included all Labour MPs who hadn't been previously elected and
+        have more than an 80% chance of winning (data collected December 2023).
+      </p>
+    ),
+  },
   {
     question: "How have you chosen the candidates?",
     answer: (
@@ -174,7 +188,6 @@ const faqs: { question: string; answer: JSX.Element }[] = [
   },
   {
     question: ' How have you calculated "chance of winning"?',
-
     answer: (
       <p>
         Our measure is based on the Electoral Calculus "chance of winning"
@@ -192,6 +205,7 @@ const faqs: { question: string; answer: JSX.Element }[] = [
 const About: React.FC = () => {
   return (
     <div className="max-w-[70rem] mx-auto pb-10">
+      <h2 className="h2">About The Project</h2>
       <div className="flex flex-col gap-2">
         <p>
           MPs can be difficult to build relationships with and influence. They

diff --git a/src/components/filters/Filters.tsx b/src/components/filters/Filters.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import { SET_SORTBY_ACTION } from "../../state/actions";
-import TextLink from "../atoms/Link";
+import { Question } from "@phosphor-icons/react";
 
 type SelectedSortDirection = "highest" | "lowest";
 
@@ -24,9 +24,14 @@ export const SortByDropdown: React.FC = () => {
     <div>
       <span className="text-xs">
         Sort by chance of winning:{" "}
-        <TextLink link="https://www.electoralcalculus.co.uk/">
-          (source)
-        </TextLink>
+        <span
+          className="tooltip-click tooltip-right z-40"
+          data-tooltip="See FAQ"
+        >
+          <button>
+            <Question size={12} />
+          </button>
+        </span>
       </span>
       <select
         className="select select-ghost-primary select-sm capitalize"