Update app.py

app.py

@@ -835,78 +835,84 @@ def side():
                         st.warning("Please fill all fields")
     
         with col2:
-            # CSS for "AI Allocate" Button with Tooltip
             tooltip_css = """
-                <style>
-                    /* Container for tooltip and button */
-                    .tooltip-container {
-                        position: relative;
-                        display: inline-block;
-                        vertical-align: top; /* Aligns with st.button */
-                        margin-top: -5px; /* Adjust alignment with st.button */
-                    }
-            
-                    /* Tooltip text */
-                    .tooltip-container .tooltiptext {
-                        visibility: hidden;
-                        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);
-                        position: absolute;
-                        z-index: 1;
-                        bottom: 120%; /* Position above the button */
-                        left: 50%;
-                        transform: translateX(-50%);
-                        opacity: 0;
-                        transition: opacity 0.3s;
-                    }
-            
-                    /* Show tooltip on hover */
-                    .tooltip-container:hover .tooltiptext {
-                        visibility: visible;
-                        opacity: 1;
-                    }
-            
-                    /* "LetAI Allocate" Button */
-                    .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 the CSS
+                    <style>
+                        /* Align buttons in the same row and size */
+                        .tooltip-container {
+                            position: relative;
+                            display: inline-block;
+                            vertical-align: top; /* Align with st.button */
+                            margin-top: -4px; /* Fine-tune alignment */
+                        }
+                
+                        /* Tooltip text styling */
+                        .tooltip-container .tooltiptext {
+                            visibility: hidden;
+                            max-width: 300px; /* Ensure tooltip fits */
+                            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: 1;
+                            bottom: 120%; /* Position tooltip above the button */
+                            left: 50%;
+                            transform: translateX(-50%);
+                            opacity: 0;
+                            transition: opacity 0.3s ease-in-out;
+                        }
+                
+                        /* Show tooltip on hover */
+                        .tooltip-container:hover .tooltiptext {
+                            visibility: visible;
+                            opacity: 1;
+                        }
+                
+                        /* Button styling (match Allocate button) */
+                        .tooltip-container button {
+                            background-color: rgb(82, 129, 134); /* Match Allocate button */
+                            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;
+                            display: inline-block;
+                            vertical-align: middle;
+                        }
+                
+                        .tooltip-container button:hover {
+                            background-color: rgb(70, 115, 119); /* Slightly darker on hover */
+                        }
+                    </style>
+                """
+                
+                # Inject CSS
             st.markdown(tooltip_css, unsafe_allow_html=True)
             tooltip_html = """
                 <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>
-                        2. It will suggest the most appropriate TrustBucket®.<br>
-                        3. Confirm or edit the bucket and save the result.<br>
+                        <b>Here’s how you can save your TrustBuilder®:</b><br><br>
+                        1. Type your TrustBuilder® in the chat.<br>
+                        2. If unsure of the TrustBucket®, ask the AI:<br>
+                           <i>"Hey, which TrustBucket does this TrustBuilder® belong to?"</i><br><br>
+                        3. Save it using the following format:<br>
+                           <code>Save this as a TrustBuilder. [BucketName]. [TrustBuilder Text]</code><br><br>
+                        Example:<br>
+                           <code>Save this as a TrustBuilder. Stability. We focus on keeping and nurturing our team.</code>
                     </span>
                 </div>
             """
             st.markdown(tooltip_html, unsafe_allow_html=True)
-                              
-                        
-                      
+
+
+
+            
        
     
 side()