Update app.py

app.py

@@ -842,70 +842,83 @@ def side():
                             st.warning("Please fill all fields")
     
         with col2:
-            custom_css = """
-            <style>
-            button {
-                background-color: rgb(82, 129, 134) !important;
-                color: white !important;
-                border: none !important;
-                padding: 8px 16px !important;
-                font-size: 14px !important;
-                border-radius: 5px !important;
-                cursor: pointer !important;
-                font-family: Arial, sans-serif !important;
-            }
-            button:hover {
-                background-color: rgb(70, 115, 119) !important;
-            }
-            </style>
-            """
-            st.markdown(custom_css, unsafe_allow_html=True)
-            letai_allocate_clicked = st.button("LetAI Allocate", key="letai_allocate_button")
-        
-            if letai_allocate_clicked:
-                # Display the pop-up message
-                popup_css = """
+            
+               tooltip_css = """
                 <style>
-                .custom-popup {
-                    background-color: rgb(82, 129, 134);
-                    color: white;
-                    padding: 15px;
-                    border-radius: 8px;
-                    font-family: Arial, sans-serif;
-                    font-size: 14px;
-                    margin-top: 10px;
-                }
-                .custom-popup code {
-                    background-color: rgba(255, 255, 255, 0.2);
-                    padding: 2px 4px;
-                    border-radius: 4px;
-                    color: white;
-                    font-family: monospace;
-                }
-                .custom-popup b {
-                    color: #FFD700; /* Gold color for emphasis */
-                }
-                .custom-popup i {
-                    color: #FFFFFF;
-                }
-                </style>
-                """
-                st.markdown(popup_css, unsafe_allow_html=True)
-                st.markdown("""
-                <div class="custom-popup">
-                    <b>Here’s how you can save your TrustBuilder® using Trustifier AI:</b><br><br>
-                    1. Type your TrustBuilder® in the chat.<br><br>
-                    2. If you're 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>
-                    <b>Example:</b><br>
-                    <code>Save this as a TrustBuilder. Stability. We focus on keeping and nurturing our team.</code>
-                </div>
-                """, unsafe_allow_html=True)
+                    /* Tooltip container styling */
+                    .tooltip-container {
+                        position: relative; 
+                        display: inline-block; 
+                        vertical-align: top; 
+                        width: 100%;
+                        margin-top: -15px; /* Aligns with st.button */
+                    }
+        
+                    /* Tooltip text styling */
+                    .tooltip-container .tooltiptext {
+                        visibility: hidden;
+                        width: 300px; /* Fixed width for better readability */
+                        max-width: 90%; /* Ensure tooltip fits within sidebar */
+                        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: calc(100% + 10px); /* Position tooltip below the button with spacing */
+                        left: 50%; /* Center horizontally */
+                        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 */
+                    .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;
+                    }
         
+                    /* Hover effect for button */
+                    .tooltip-container button:hover {
+                        background-color: rgb(70, 115, 119);
+                    }
+                </style>
+            """
+        
+            # Inject CSS
+            st.markdown(tooltip_css, unsafe_allow_html=True)
+        
+            # Tooltip Button
+            st.markdown("""
+                <div class="tooltip-container">
+                    <button>LetAI Allocate</button>
+                    <span class="tooltiptext">
+                        <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>
+            """, unsafe_allow_html=True)