Tool tips in fullscreen mode for charts

Using Streamlit
1

Tool tips for the bar charts works for me in regular mode . When “view full screen” mode is used , tool tips are not shown . How do i resolve this ?

1 Like
2

Hi @dataexplorer, welcome to the Streamlit community!

Could you give a brief code snippet of what you are doing, so that I can try it out on my computer?

Best,
Randy

3

I have the same issue. Tooltips in fullscreen do not seem to show up in Altair’s mark_line charts.
Here’s code to reproduce the issue:

demo_df = pd.DataFrame({
    'timestamp': [pd.Timestamp(2020, 1, i) for i in range(1, 31)],
    'value': np.random.randn(30).cumsum()
})
demo = alt.Chart(demo_df).mark_line().encode(
    x='timestamp:T',
    y='value:Q',
    tooltip=['value', 'timestamp']
).interactive()
st.altair_chart(demo, use_container_width=True)

I checked the Altair / Vega library for any hints, but unsuccessful so far.
So any help is appreciated!

Best,
Quinten

4

Hello @quinten,

Actually the tooltips really are present in wide screen (at least for me, is it what you call fullscreen ? It also works in fullscreen for me though…), but you’ll need to be very precise to select a point on the line chart where tooltips are defined:

image
image860×464 18.2 KB

I usually recommend adding some point markers to show where the tooltip can occur:

demo_df = pd.DataFrame({
    'timestamp': [pd.Timestamp(2020, 1, i) for i in range(1, 31)],
    'value': np.random.randn(30).cumsum()
})
base = alt.Chart(demo_df).encode(
    x='timestamp:T',
    y='value:Q',
    tooltip=['value', 'timestamp']
)
line = base.mark_line()
points = base.mark_point(filled=True, size=40)
chart = (line + points).interactive()
st.altair_chart(chart, use_container_width=True)

image
image744×353 16.5 KB

I think there’s a “select closest point” in the Altair docs, I don’t remember where…

Best,
Fanilo

5

Hello Fanilo,

Thanks for your quick reply!
What I mean by “full screen” is clicking on the expand arrows when hovering on a container plot (see image). On the image below, the tooltip works indeed great when not expanded!

working
working1670×610 58 KB

However, in fullscreen, this tooltip disappears. Even when hovering clearly over the mark_points.

not_working
not_working3334×1836 286 KB

I can’t seem to get a tooltip pop up in the second case.
I’'ll look into the 'select closest point", but it’s not working for me in MacOS Big Sur, latest build (Version 87.0.4280.67).

Best,
Quinten

3 Likes
6

Hi @quinten, were you able to find any solutions for this? I am also having the same issue using full-screen mode.

2 Likes
7

Hi Jvac06,

Apologies for my delayed reply.
I haven’t figured out a way to do this at this point. I thought the solution had some quick and easy configuration solution of some sort, but it doesn’t seem to be the case.

Hence, our team moved on to a more priority item on the backlog.
Please do let us know if you find a solution!

Best,
Quinten

8

FYI see https://github.com/vega/vega-tooltip/pull/507

9

Web developer here. Tooltip is actually generated and works as expected, but it’s overlaid with a chart modal in full-screen view. In order to solve this issue, just put this code anywhere:

st.markdown('<style>#vg-tooltip-element{z-index: 1000051}</style>',
             unsafe_allow_html=True)

And before you say “Are you mad? Why would you use this insane number for z-index ?” And the answer is “no”, because this insane number is used for chart modal in full-screen view.

Cheers,
Volodymyr

11 Likes
10

@vladnik - this sounds a like a bug, do you think it’s in vega or streamlit?