From b2d7937b843f643a07563cbf5550d71522d55f61 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Thu, 12 Dec 2024 13:54:52 +0100
Subject: [PATCH] feat: add tooltip to filter badge - not working yet

---
 src/pages/view/SlideshowControlbar.js         | 25 +++++++++++++++----
 .../styles/SlideshowControlbar.module.css     |  2 +-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/pages/view/SlideshowControlbar.js b/src/pages/view/SlideshowControlbar.js
index 20ea622b5..7c08ce10f 100644
--- 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
index 58c9891de..bee5956c9 100644
--- 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;