Help Icon alignment st.metric()

[kmedri]

The picture below shows a st.selectbox() on the left with the icon positioned nicely to the right and inline with the label.
On the right is the st.metric() widget with the help icon positioned below the label.

The hack I used:

.css-1whk732 {
        -webkit-box-pack: end;
        justify-content: flex-end;
        flex: 1 1 0%;
        }

Here is the result, not perfect but much better.

Is the alignment set below the label normal for st.metric(), or have I done something wrong?

[Caroline]

The default alignment puts the question mark symbol on the right-hand side of the label. You’re likely seeing the question mark symbol below the label due to the size of the column/this is probably a bug. If you take away the columns or reduce to two columns, does the positioning of the question mark symbol change?

[kmedri]

It looks like it may be a bug. If we look at the st.selectbox() it is inside a label with a class set with display: flex as follows:

the tooltip then has a class set with display: flex and flex: 1 1 0% as follows:

This positions the help icon inline and to the right of the label.

st.metric() label has another div nested inside that sets display: block and overides the display: flex:

[snehankekre]

Hi @kmedri

You and @Caroline were right! It was a bug We identified the regression in v1.18.0:

Regression in v1.18.0 `st.metric`'s `help` tooltip position

and fixed it:

Fix `st.metric` tooltip position regression

The label in st.metric should appear in the expected position if you upgrade to streamlit==1.19.0, as detailed in the 1.19.0 changelog.

[kmedri]

Thank you for the quick fix, very impressed.