Update app.py

app.py

@@ -27,15 +27,14 @@ html_code = """
         .planet:hover {
             transform: scale(1.2); /* Scale up the planet on hover */
         }
-        .tooltip {
-            position: fixed;
+        .info-box {
             background: rgba(0, 0, 0, 0.7);
             color: #fff;
             padding: 10px;
             border-radius: 5px;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.3s;
+            margin-top: 20px;
+            width: 100%;
+            text-align: center;
         }
     </style>
 </head>
@@ -46,8 +45,8 @@ html_code = """
         <div class="planet" id="venus" style="width: 30px; height: 30px; background: orange;"></div>
         <div class="planet" id="earth" style="width: 40px; height: 40px; background: blue;"></div>
         <div class="planet" id="mars" style="width: 30px; height: 30px; background: red;"></div>
-        <div class="tooltip" id="tooltip"></div>
     </div>
+    <div class="info-box" id="info-box">Click on a planet to see information</div>
     <script>
         const planets = [
             { id: 'sun', name: 'Sun', facts: 'The Sun is the star at the center of the Solar System.' },
@@ -57,22 +56,12 @@ html_code = """
             { id: 'mars', name: 'Mars', facts: 'Mars is known as the Red Planet due to its reddish appearance.' },
         ];
 
-        const tooltip = document.getElementById('tooltip');
+        const infoBox = document.getElementById('info-box');
 
         planets.forEach(planet => {
             const element = document.getElementById(planet.id);
-            element.addEventListener('mouseover', (event) => {
-                tooltip.innerHTML = `<strong>${planet.name}</strong><br>${planet.facts}`;
-                tooltip.style.opacity = 1;
-                tooltip.style.top = `${event.clientY + 10}px`;
-                tooltip.style.left = `${event.clientX + 10}px`;
-            });
-            element.addEventListener('mousemove', (event) => {
-                tooltip.style.top = `${event.clientY + 10}px`;
-                tooltip.style.left = `${event.clientX + 10}px`;
-            });
-            element.addEventListener('mouseout', () => {
-                tooltip.style.opacity = 0;
+            element.addEventListener('click', () => {
+                infoBox.innerHTML = `<strong>${planet.name}</strong><br>${planet.facts}`;
             });
         });
 
@@ -109,7 +98,7 @@ demo = gr.Interface(
     inputs=[],
     outputs="html",
     title="Solar System Simulator",
-    description="A colorful and animated solar system simulator. Hover over the planets to see key facts."
+    description="A colorful and animated solar system simulator. Click on the planets to see key facts."
 )
 
 if __name__ == "__main__":