Update app.py

app.py

@@ -838,59 +838,63 @@ def side():
             # CSS for "AI Allocate" Button with Tooltip
             tooltip_css = """
                 <style>
-                    .tooltip {
+                    /* Container for tooltip and button */
+                    .tooltip-container {
                         position: relative;
                         display: inline-block;
-                        margin: 0;
-                        text-align: center;
+                        vertical-align: top; /* Aligns with st.button */
+                        margin-top: -5px; /* Adjust alignment with st.button */
                     }
-                    .tooltip .tooltiptext {
+            
+                    /* Tooltip text */
+                    .tooltip-container .tooltiptext {
                         visibility: hidden;
-                        width: 300px; /* Tooltip width */
+                        max-width: 250px; /* 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);
+                        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
                         position: absolute;
                         z-index: 1;
-                        bottom: 125%; /* Position tooltip above the button */
+                        bottom: 120%; /* Position above the button */
                         left: 50%;
                         transform: translateX(-50%);
                         opacity: 0;
                         transition: opacity 0.3s;
                     }
-                    .tooltip:hover .tooltiptext {
+            
+                    /* Show tooltip on hover */
+                    .tooltip-container:hover .tooltiptext {
                         visibility: visible;
                         opacity: 1;
                     }
-                    .tooltip button {
-                        all: unset;
-                        background-color: rgb(82, 129, 134); /* Custom button background */
-                        color: white; /* White text */
+            
+                    /* "LetAI Allocate" Button */
+                    .tooltip-container button {
+                        background-color: rgb(82, 129, 134);
+                        color: white;
                         border: none;
-                        padding: 10px 20px;
-                        font-size: 16px;
-                        font-family: Arial, sans-serif;
-                        border-radius: 8px;
+                        padding: 8px 16px;
+                        font-size: 14px;
+                        border-radius: 5px;
                         cursor: pointer;
-                        box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
-                        text-align: center;
+                        box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
+                        font-family: Arial, sans-serif;
                     }
-                    .tooltip button:hover {
-                        background-color: rgb(70, 115, 119); /* Darker shade for hover effect */
+            
+                    .tooltip-container button:hover {
+                        background-color: rgb(70, 115, 119);
                     }
                 </style>
             """
-        
-            # Inject the tooltip CSS
+            
+            # Inject the CSS
             st.markdown(tooltip_css, unsafe_allow_html=True)
-        
-            # Tooltip button
             tooltip_html = """
-                <div class="tooltip">
-                    <button>AI Allocate</button>
+                <div class="tooltip-container">
+                    <button>LetAI Allocate</button>
                     <span class="tooltiptext">
                         <b>Let AI help you allocate the TrustBuilder®:</b><br><br>
                         1. AI will analyze the TrustBuilder® text.<br>
@@ -900,12 +904,8 @@ def side():
                 </div>
             """
             st.markdown(tooltip_html, unsafe_allow_html=True)
+                              
                         
-
-        
-
-
-