File size: 3,098 Bytes
0d0fdc8
 
 
 
0e10161
 
0d0fdc8
0e10161
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0d0fdc8
 
0e10161
c8b1060
 
 
 
 
0e10161
 
 
 
 
 
 
c8b1060
 
 
 
 
0e10161
 
 
 
 
c8b1060
0e10161
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0d0fdc8
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

import gradio as gr
from gradio_buttontip import ButtonTip

def submit():
    return gr.Button(value='New Left Button'), gr.Button(value='New Right Button')


css = """
.icon-button {
    display: flex;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0px 0px;
    justify-content: center;
    align-items: center;
    max-height: 24px;
    min-height: 24px;
    max-width: 24px !important;
    min-width: 24px !important;
}
"""

CIMStheme = gr.themes.Soft().set(
    button_primary_background_fill='#000D65',
    button_primary_border_color='#000D65',
    button_secondary_background_fill='#FFFFFF',
    button_primary_background_fill_hover='#454E8E',
    block_title_text_color='#000D65',
    block_title_background_fill='#E6E7F0',
    block_label_background_fill='#E6E7F0',
    block_label_text_color='#000D65',
    button_secondary_border_color='#000D65',
    button_secondary_text_color='#000D65',
    button_border_width='2px',
    checkbox_label_background_fill='#F9FAFB',
    checkbox_label_background_fill_selected='#E6E7F0',
    checkbox_background_color_selected='#000D65',
    checkbox_border_color_selected='#000D65',
    checkbox_border_color='#E5E7EB',
    checkbox_background_color='#F9FAFB',
    checkbox_label_border_color='#ababab',
    checkbox_label_text_color='#000D65',
    checkbox_label_text_color_selected='#000D65'
    )

with gr.Blocks(css=css, theme=CIMStheme) as demo:
    gr.Markdown("This interface showcases a button with a tooltip.")
    with gr.Row():
        first_btn = ButtonTip(
                tooltip="Tooltip Text",
                tooltip_color="white",  # Custom color
                tooltip_background_color="red",
                x=120,  # No horizontal offset
                y=-20,  # Above the button
                value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='QuizIcon.png',
                scale=0
            )
        second_btn = ButtonTip(
                tooltip="Tooltip Text",
                tooltip_color="white",  # Custom color
                tooltip_background_color="blue",
                x=-90,  # No horizontal offset
                y=-20,  # Above the button
                value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='PDFIcon.png',
                scale=0
            )
    with gr.Row():
        third_btn = gr.Button(value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='QuizIcon.png',
                scale=0)
        fourth_btn = gr.Button(                value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='PDFIcon.png',
                scale=0)
    with gr.Row():
        submit_btn = gr.Button(value='Submit')
        submit_btn.click(fn=submit, inputs=None, outputs=[first_btn, second_btn])
        #submit_btn.click(fn=submit, inputs=None, outputs=[third_btn, fourth_btn])

if __name__ == "__main__":
    demo.launch()