Selectbox Tooltip Blocking User Selection

Using Streamlit
, ,
1

I am building an app that will classify the sentiment of news headlines and allow users to perform several different actions with the data after it has been processed via selectboxes and forms.

One Selectbox I have created contains a list of URL’s that are too long for the widget to display properly; when you hover over any of the options the full text is displayed in a tooltip (this is a great feature and what I would like to happen), however the tooltip blocks the dropdown list of the Selectbox and makes selection difficult (briefly while the tooltip renders it is impossible to make a selection).

I think this is happening because of the spacing/widget layout of my app, because I do not see the same behavior if the form/selectbox are not nested within tabs/columns. Am I correct in that assumption? If so, is there a way to make the tooltip render on top of the widget itself instead of the dropdown selection? Any help would be appreciated, thanks.

image
image3728×778 88.2 KB

System Info
os: windows 10
python: 3.9.13
streamlit = 1.36.0 (running locally)
monitor size: 27 inches

Here is sample code to reproduce the tooltip behavior:

import streamlit as st

# sample data
url_1 = 'https://finance.yahoo.com/news/b2gold-btg-q1-earnings-beat-154600970.html?.tsrc=rss&guccounter=1'
url_2 = 'https://finance.yahoo.com/news/shell-shel-exits-chinas-power-154500093.html?.tsrc=rss'
url_list = [url_1, url_2]

st.set_page_config(page_title="Example", layout="wide")

# structure to mimic my app
st.title("Selectbox Example", anchor=False)
tab_1, tab_2, tab_3 = st.tabs(["tab1", "tab2", "tab3"])

with tab_1:
    columns = st.columns([1, 1, 2, 20])
    with columns[0]:
        st.write("Test")
        st.write("Test")
    with columns[1]:
        st.write("Test")
        st.write("Test")
    with columns[2]:
        st.write("Test")
        st.write("Test")
    with columns[3]:
        with st.form("url_form", clear_on_submit=True, border=False):
            nested = st.columns([2, 3, 1, 1, 1])
            with nested[0]:
                st.write("Test")
                st.write("Test")
            with nested[1]:
                st.write("Test")
                st.write("Test")
            with nested[2]:
                st.write("Test")  
                st.write("Test")
            with nested[3]:
                st.selectbox(
                    label="Link",
                    options=url_list,
                    index=None, 
                    key=f"selected_url_1",
                    placeholder="Select Link",
                    label_visibility="collapsed")
                st.selectbox(
                    label="Link",
                    options=url_list,
                    index=None, 
                    key=f"selected_url_2",
                    placeholder="Select Link",
                    label_visibility="collapsed")
            with nested[4]:
                submitted_for_review = st.form_submit_button(
                    label="Submit",
                    type="primary",
                    use_container_width=True)

# sidebar (think available space may have something to do with this issue?)
# I have the sidebar defined in my entry file in the actual app
with st.sidebar: 
    st.subheader("Sidebar Example", anchor=False, divider=True)