Increase the size of tooltip icon

Using Streamlit
1

How can I possibly increase the size of the tooltip icon (the question mark that appears following the usage of the help parameter)?

I played around a little and found that this can be achieved playing around with ‘height’ and ‘width’ in the html lines below.

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
2

Hi @omoyanre,

Thanks for posting!

Can you share your code snippet for the feature for more context?

3

Thanks for the quick response @tonykip. It looks like this:

import streamlit as st
age_tooltip = '''Your risk of this disease grows as you age.'''
age = st.slider(label = 'What is your age?', 
                min_value=18, 
                max_value=120,
                help=age_tooltip,
                )
4

You can change the size of the icon using CSS code:

image
image866×251 5.54 KB

import streamlit as st
age_tooltip = '''Your risk of this disease grows as you age.'''
# Define custom CSS to increase tooltip icon size
custom_css = """
    <style>
        #bui2__anchor > svg{
            width: 32px;
            height: 32px;
        }
    </style>
"""
# Display the custom CSS
st.markdown(custom_css, unsafe_allow_html=True)
# Create the slider with the help parameter
age = st.slider(label='What is your age?', 
                min_value=18, 
                max_value=120,
                help=age_tooltip,
               )
1 Like
5

Thanks @coder. This works.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

7

Awesome CSS hack by @coder. Happy Streamlit-ing! :balloon: