Pop-up in the label of streamlit.slider

[omoyanre]

Hi, I would like to have a pop-up when I hover around a section of the streamlit.slider label (“more info” in the code below). Also, I would like to have hyperlinks within the pop-up text.

import streamlit as st 
popup_text = '''Your risk of this disease grows as you age. [more info](https://www.google.com/)''' 
age = st.slider(label = 'What is your age?', min_value=18, max_value=120)

[CarlosSerrano]

Hi @omoyanre

You can use the help attribute on the slider widget for that.

popup_text = """Your risk of this disease grows as you age. [more info](https://www.google.com/)"""
age = st.slider(label="What is your age?", min_value=18, max_value=120, help=popup_text)

[omoyanre]

@CarlosSerrano Thanks for the response. I would ideally want to customize the tooltip icon with some text, and have it close to the label. Please see the attached screenshot

[CarlosSerrano]

You can place that url on the label, but to alter the tooltip, you might need to do some CSS overrides.

[omoyanre]

I will prefer to have the “popup_text” pop up when I click on or over around “[understand the connection to cancer]”. Any help from the community will be appreciated.

[CarlosSerrano]

You can technically do this with CSS overrides using the StylableContainer custom component from streamlit-extras. Here is an example.

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

popup_text = """Your risk of this disease grows as you age. """
popup_text_url = "[More info](https://www.google.com/)"
with stylable_container(
    key="custom_tooltip",
    css_styles=f"""
    div[data-testid="tooltipHoverTarget"]::after{{
    content:"{popup_text}";
    }}
    div[data-testid="tooltipHoverTarget"]>svg{{
    display:none;
    }}
    """,
):
    age = st.slider(
        label="What is your age? ",
        min_value=18,
        max_value=120,
        help=popup_text_url,
    )

[omoyanre]

Awesome! Thanks a bunch, @CarlosSerrano. This will help me a lot.