import gradio as gr

def func(percent, numBlocks):
    filledSquares = "<div style='height:12px;width:12px;background-color:#555;display:inline-block;position:relative' id='filled'><span class='tooltiptext'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
    emptySquares = "<div style='height:12px;width:12px;background-color:#999;display:inline-block;position:relative' id='empty'><span class='tooltiptext'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
    numFilled = round((percent/100) * numBlocks)
    print(f"numFilled: {numFilled}")
    numEmpty = numBlocks - numFilled
    print(f"numEmpty: {numEmpty}")
    HTMLstr = filledSquares * numFilled + emptySquares * numEmpty
    return HTMLstr
    

css_adds = ".tooltiptext {visibility: hidden;max-width:100ch;min-width:60ch;top: 100%;left: 50%;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")
    button.click(func, inputs=[percent, numBlocks], outputs=gr.HTML())

demo.launch()