Tooltips on charts

[quantoid]

Problem

We find it difficult to make charts 100% self-explanatory. There is always some knowledge assumed, otherwise we'd have to put a load of text onto the dashboard that users only ever read once, after which it just becomes clutter. We've tried using st.expand but they still take up space when collapsed, and lots of them on a dashboard is not a great look.

Solution

Provide a function called something like st.help or st.hint that renders as a (?) icon, where hovering or clicking on the icon pops up a panel with the relevant help content.

Basically similar to the help icons on input widgets like st.selectbox but with more space for help content.

with st.help("using this chart"):
    st.markdown("Use this chart to see which...")

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[carolinedlu]

Hey @quantoid, thanks for flagging this!
st.line_chart is a wrapper for an Altair chart, and Altair charts supports tooltips. Have you tried adding a tooltip to the Altair chart and then passing that to Streamlit? Not sure if that's what you're looking for

Edit: it sounds like this is what you're suggesting, assuming the tooltips aren't what you're looking for

[quantoid]

@carolinedlu no, this is about pop-up help for a whole dashboard, not just for individual datapoints on a chart or on the st.metric widget. For example, if a dashboard is divided into sections with headings, we want to provide help on what each section is for without that content permanently taking up space on the dashboard.

What we want is basically similar to st.expand except the collapsed mode is just an icon, and expanding it doesn't move anything around on the dashboard, just pops up a container on top (in front) of the dashboard. Could even be an option passed in, like st.expand("Learn more...", popup=True).

[carolinedlu]

@quantoid Thanks for clarifying! In that case it sounds similar to this open issue about pop-up modals.

[jrieke]

If I get that correctly, you just want tooltips everywhere, right?

[carolinedlu]

From @Casyfill:

I am building a demo around an ML model, and need to explain the features I use to a broad audience. This means that ideally, I need a dedicated place to describe what each feature means.

I really like the tooltip option for streamlit input widgets, so I’d love to use the same widget within my markdown and elsewhere (e.g. in the dataframe header) - I have a list of feature names and be able to set a tooltip question mark with an explanation on hover near it. I know there are a few ways different markdown flavors do something like that. The way I see it it could be something like that:

st.markdown('''
- first feature ?[:question:](Tooltip text for the first feature)
- second feature ?[:exclamation:](Tooltip text for the Second feature)
''')

related discuss topic

[sfc-gh-jrieke]

Since 1.21, you can now add tooltips to most text elements. I.e. building on your original example, you could do something like this:

st.subheader("A beautiful chart", help="Use this chart to see which...")

While this should solve the original request, the better solution to the original request would be to allow tooltips directly on chart elements! So I'll leave this issue open and change the title to reflect that.

[quantoid]

@sfc-gh-jrieke from my point of view this issue can be closed now that we have the help parameter for things like st.markdown and also have the ability to configure tooltips on column headings in st.dataframe.

[jrieke]

Ok cool, closing!