Update app.py

app.py

@@ -837,55 +837,56 @@ def side():
         
 
         tooltip_css = """
-                        <style>
-                            .tooltip-container {
-                                 position: relative; 
-                                display: inline-block; 
-                                vertical-align: top; 
-                                margin-top: -15px;
-                            }
-    
-                            
-                    
-                            .tooltip-container .tooltiptext {
-                                visibility: hidden;
-                                max-width: auto; /* Tooltip width */
-                                background-color: #f9f9f9;
-                                color: #333;
-                                text-align: left;
-                                border-radius: 8px;
-                                padding: 10px;
-                                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-                                position: absolute;
-                                z-index: 1000; /* Ensure tooltip is above other elements */
-                                top: 100%; /* Position below the button */
-                                left: 50%; /* Center horizontally */
-                                transform: translateX(-50%);
-                                opacity: 0;
-                                transition: opacity 0.3s ease-in-out;
-                            }
-                            .tooltip-container:hover .tooltiptext {
-                                visibility: visible;
-                                opacity: 1;
-                            }
-                    
-                            .tooltip-container button {
-                                background-color: rgb(82, 129, 134);
-                                color: white;
-                                border: none;
-                                padding: 8px 16px;
-                                font-size: 14px;
-                                border-radius: 5px;
-                                cursor: pointer;
-                                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-                                font-family: Arial, sans-serif;
-                            }
-                    
-                            .tooltip-container button:hover {
-                                background-color: rgb(70, 115, 119);
-                            }
-                        </style>
-                    """
+        <style>
+        .tooltip-container {
+            position: relative; 
+            display: inline-block; 
+            vertical-align: top; 
+            margin-top: -15px;
+        }
+
+        .tooltip-container .tooltiptext {
+            visibility: hidden;
+            max-width: 90%; /* Tooltip width based on parent container */
+            width: auto; /* Automatically adjust width */
+            background-color: #f9f9f9;
+            color: #333;
+            text-align: left;
+            border-radius: 8px;
+            padding: 10px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            position: absolute;
+            z-index: 1000; /* Ensure tooltip is above other elements */
+            top: 100%; /* Position below the button */
+            left: 50%; /* Center horizontally */
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+            word-wrap: break-word; /* Ensure long text wraps */
+        }
+        .tooltip-container:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .tooltip-container button {
+            background-color: rgb(82, 129, 134);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            font-size: 14px;
+            border-radius: 5px;
+            cursor: pointer;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+            font-family: Arial, sans-serif;
+        }
+
+        .tooltip-container button:hover {
+            background-color: rgb(70, 115, 119);
+        }
+         </style>
+        """
+
                     
                     # Inject CSS
         st.markdown(tooltip_css, unsafe_allow_html=True)