add uoload dataset recommended file naming hover effect (#153)

Co-authored-by: YUAN TIAN <[email protected]>

src/autogluon/assistant/ui/file_uploader.py

@@ -44,7 +44,18 @@ def file_uploader():
     """
     Handle file uploads
     """
-    st.markdown("#### Upload Dataset")
+    header_html = """
+     <div class="header-hover">
+         <h4>Upload Dataset</h4>
+         <div class="tooltip">
+             Recommended file naming:<br>
+             • train.csv/xlsx<br>
+             • test.csv/xlsx<br>
+             • sample_dataset.csv/xlsx
+         </div>
+     </div>
+     """
+    st.markdown(header_html, unsafe_allow_html=True)
     uploaded_files = st.file_uploader(
         "Select the dataset", accept_multiple_files=True, label_visibility="collapsed", type=["csv", "xlsx"]
     )

src/autogluon/assistant/ui/style.css

@@ -310,4 +310,32 @@ div[data-testid='stExpanderDetails'] p{
         padding-left: 5vw;
         padding-top: 2vh;
     }
-    }
+    }
+/* Hover css for uploaded file widget*/
+.header-hover {
+             position: relative;
+             display: inline-block;
+         }
+
+.header-hover .tooltip {
+ visibility: hidden;
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: white;
+ text-align: left;
+ padding: 8px;
+ border-radius: 4px;
+ z-index: 1000;
+ width: 250px;
+ top: 100%;
+ left: 0;
+ margin-top: 5px;
+ font-size: 14px;
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+
+.header-hover:hover .tooltip {
+ visibility: visible;
+ opacity: 1;
+}