Update app.py

app.py

@@ -329,13 +329,11 @@ async def predict(image):
                         </h2>
                         <div class="info-section">
                             <div class="info-item">
-                                <span class="tooltip">
-                                <span class="tooltip tooltip-right">
+                                <span class="tooltip tooltip-left">
                                     <span class="icon">📏</span>
                                     <span class="label">Size:</span>
                                     <span class="tooltip-icon">ⓘ</span>
                                     <span class="tooltip-text">
-                                    <span class="tooltip tooltip-left">
                                         <strong>Size Categories:</strong><br>
                                         • Small: Under 20 pounds<br>
                                         • Medium: 20-60 pounds<br>
@@ -384,12 +382,11 @@ async def predict(image):
                         </h2>
                         <div class="care-section">
                             <div class="info-item">
-                                <span class="tooltip">
+                                <span class="tooltip tooltip-left">
                                     <span class="icon">🏃</span>
                                     <span class="label">Exercise:</span>
                                     <span class="tooltip-icon">ⓘ</span>
                                     <span class="tooltip-text">
-                                    <span class="tooltip tooltip-left">
                                         <strong>Exercise Needs:</strong><br>
                                         • Low: Short walks and play sessions<br>
                                         • Moderate: 1-2 hours of daily activity<br>
@@ -768,23 +765,34 @@ async def predict(image):
             padding: 15px;
             position: absolute;
             z-index: 100;
-            bottom: 130%;
-            left: -100px;
+            bottom: 150%;
+            left: 50%;
+            transform: translateX(-50%);
             opacity: 0;
             transition: all 0.3s ease;
             font-size: 14px;
             line-height: 1.6;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.1)
+            margin-bottom: 10px; 
         }}
 
         .tooltip.tooltip-left .tooltip-text {{
             left: 0;  
+            transform: translateX(0);
         }}
 
         .tooltip.tooltip-right .tooltip-text {{
             left: auto;
             right: 0;
+            transform: translateX(0);
+        }}
+
+        .tooltip-text strong {{
+            color: white !important;  /* 確保文字為白色 */
+            background-color: transparent !important;  /* 移除背景色 */
+            display: block;  /* 讓標題獨立一行 */
+            margin-bottom: 8px;  /* 增加標題下方間距 */
         }}
         
         .tooltip .tooltip-text::after {{
@@ -798,6 +806,15 @@ async def predict(image):
             border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
         }}
 
+        .tooltip-left .tooltip-text::after {{
+            left: 20%;
+        }}
+        
+        /* 右側箭頭 */
+        .tooltip-right .tooltip-text::after {{
+            left: 80%;
+        }}
+
         .tooltip:hover .tooltip-text {{
             visibility: visible;
             opacity: 1;
@@ -808,10 +825,10 @@ async def predict(image):
             position: absolute;
             top: 100%;
             left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
+            transform: translateX(-50%);
+            border-width: 8px;
             border-style: solid;
-            border-color: #2c3e50 transparent transparent transparent;
+            border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
         }}
         </style>
         {dogs_info}