Update app.py

app.py

@@ -1,8 +1,8 @@
 import gradio as gr
 
 def func(percent, numBlocks):
-    filledSquares = "<div style='height:12px;width:12px;background-color:#555;display:inline-block'></div> "
-    emptySquares = "<div style='height:12px;width:12px;background-color:#999;display:inline-block'></div> "
+    filledSquares = "<div style='height:12px;width:12px;background-color:#555;display:inline-block' id='filled'><span class='tooltiptext'>Tooltip text</span></div> "
+    emptySquares = "<div style='height:12px;width:12px;background-color:#999;display:inline-block' id='empty'><span class='tooltiptext'>Tooltip text</span></div> "
     numFilled = round((percent/100) * numBlocks)
     print(f"numFilled: {numFilled}")
     numEmpty = numBlocks - numFilled
@@ -10,9 +10,12 @@ def func(percent, numBlocks):
     HTMLstr = filledSquares * numFilled + emptySquares * numEmpty
     return HTMLstr
     
-    
 
-with gr.Blocks() as demo:
+css_adds = ".tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
+#filled:hover .tooltiptext {visibility: visible;} \
+#empty:hover .tooltiptext {visibility: visible;}"
+
+with gr.Blocks(css=css_adds) as demo:
     percent = gr.Slider(1, 100, value=50, step=1, label="percentage")
     numBlocks = gr.Slider(3, 20, value=4, step=1, label="number of blocks")
     button = gr.Button("button")