Update tooltip to allow more text.

ccxzhang · Aug 23, 2024 · dc85ab5 · dc85ab5
1 parent 2b83989
commit dc85ab5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/src/renderer/src/components/Tooltip.jsx b/src/renderer/src/components/Tooltip.jsx
@@ -1,30 +1,48 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 
 // eslint-disable-next-line react/prop-types
 const Tooltip = ({ children }) => {
   const [show, setShow] = useState(false)
+  const tooltipRef = useRef(null)
+  const [tooltipPosition, setTooltipPosition] = useState({})
+
+  useEffect(() => {
+    if (tooltipRef.current && show) {
+      const { offsetTop, offsetHeight } = tooltipRef.current
+      const newTooltipPosition = {
+        bottom: `calc(100% + ${offsetHeight / 2}px)`, // Adjust this calculation as needed
+        left: '50%',
+        transform: 'translateX(-50%)'
+      }
+      setTooltipPosition(newTooltipPosition)
+    }
+  }, [show])
 
   return (
     <span
-      className="inline-flex items-center justify-center w-6 h-6 bg-gray-200 rounded-full text-gray-600 cursor-pointer relative"
+      className="inline-flex items-center justify-center w-6 h-6 bg-gray-200 rounded-full cursor-pointer relative"
       onMouseEnter={() => setShow(true)}
       onMouseLeave={() => setShow(false)}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
-        class="size-5"
+        className="size-5"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
       </svg>
 
       {show && (
-        <div className="absolute bottom-full mb-2 w-48 p-2 bg-gray-100 bg-opacity-75 text-gray-800 text-sm rounded shadow-lg">
+        <div
+          ref={tooltipRef}
+          className="absolute w-80 bg-gray-100 bg-opacity-75 text-sm rounded shadow-lg p-3"
+          style={tooltipPosition}
+        >
           {children}
         </div>
       )}

diff --git a/src/renderer/src/output.css b/src/renderer/src/output.css
@@ -612,10 +612,6 @@ html {
   inset: 0px;
 }
 
-.bottom-full {
-  bottom: 100%;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -789,6 +785,10 @@ html {
   width: 1.5rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -821,6 +821,10 @@ html {
   flex-grow: 1;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1091,6 +1095,10 @@ html {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }

diff --git a/src/renderer/src/pages/MainPage/index.jsx b/src/renderer/src/pages/MainPage/index.jsx
@@ -191,11 +191,21 @@ const MainPage = ({ queryDb }) => {
             <h3 className="text-lg font-semibold mb-4 text-gray-700">
               Disaggregation{' '}
               <Tooltip>
-                <div>
-                  <p>
-                    Disaggregation includes <em>category combination options</em> and{' '}
-                    <em>organization Group sets</em>
-                  </p>
+                <div className="text-gray-600 text-sm">
+                  Disaggregation includes:
+                  <ul className="list-disc pl-5">
+                    <li>
+                      <em>Category combination options</em> are dynamically composed of all of the
+                      different combinations of category options which compose a category
+                      combination. As an example, two categories "Gender" and "Age," might have
+                      options such as "Male" or "Female" and "{'<'}5 years" or "{'>'}5 years." One
+                      of the Category combination options would be "Male {'<'}5 years."
+                    </li>
+                    <li>
+                      <em>Organization Units Group Sets</em> are typically related to the attributes
+                      of organization units, such as "ownership," "type."
+                    </li>
+                  </ul>
                 </div>
               </Tooltip>
             </h3>