feat: add tooltip to filter badge - not working yet

dhis2 · Dec 12, 2024 · b2d7937 · b2d7937
1 parent e38ecf5
commit b2d7937
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/pages/view/SlideshowControlbar.js b/src/pages/view/SlideshowControlbar.js
@@ -3,6 +3,7 @@ import {
     IconChevronRight24,
     IconChevronLeft24,
     IconCross24,
+    Tooltip,
     colors,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -69,13 +70,27 @@ const SlideshowControlbar = ({
                     />
                 </button>
             </div>
-            <ul className={styles.filters}>
+            <div className={styles.filters}>
                 {filters.map((filter) => (
-                    <li key={filter.id} className={styles.filter}>
-                        {getFilterText(filter)}
-                    </li>
+                    <Tooltip
+                        content="These are the filters"
+                        key={filter.id}
+                        placement="left"
+                    >
+                        {({ onMouseOver, ref }) => (
+                            <span
+                                onMouseOver={() => onMouseOver()}
+                                // onMouseOut={() => onMouseOut()}
+                                ref={ref}
+                            >
+                                <span className={styles.filter}>
+                                    {getFilterText(filter)}
+                                </span>
+                            </span>
+                        )}
+                    </Tooltip>
                 ))}
-            </ul>
+            </div>
         </div>
     )
 }

diff --git a/src/pages/view/styles/SlideshowControlbar.module.css b/src/pages/view/styles/SlideshowControlbar.module.css
@@ -9,7 +9,7 @@
     block-size: 40px;
 }
 
-.container> :first-child {
+.container > :first-child {
     flex-grow: 1;
     flex-basis: 0;
     margin-inline-start: 4px;