[feat] Add help argument and tooltip to st.badge #12897

marcolanfranchi · 2025-10-30T09:27:33Z

Describe your changes

This PR adds tooltip support for the st.badge component. Badges can now display help text when hovered over using the same BaseButtonTooltip as other Streamlit elements.

Key changes include:

Added BaseButtonTooltip wrapper for badges with help text
Added functionality so that multiple badges or badges with surrounding text in st.markdown() continue to use the inline tooltip (with '?' icon) instead of the BaseButtonTooltip
- st.markdown(':grey-badge[Label]', help='...') (st.markdown containing a single badge after trimming whitespace with help) will now behave the same as st.badge('...', help='...') in the demo above, using the BaseButtonTooltip.
Maintained consistent styling for new st.badge tooltip by using BaseButtonTooltip
Ensured backward compatibility for existing badges without tooltips

GitHub Issue Link

#12878

Testing Plan

Verified that badges with and without tooltips render correctly
Tested hover behaviour and tooltip positioning
Confirmed multi-badge and badges with text in Markdown still use the inline tooltip
Confirmed no regressions in other Markdown-rendered badges

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

## Describe your changes This PR adds tooltip support for the `st.badge` component. Badges can now display help text when hovered over using the same `BaseButtonTooltip` as other Streamlit elements. Key changes: - Added `BaseButtonTooltip` wrapper for badges with `help` text - Added functionality so that multiple badges or badges with surrounding text in `st.markdown()` continue to use the inline tooltip instead of the `BaseButtonTooltip` - Maintained consistent styling for new `st.button` tooltip by using `BaseButtonTooltip` - Ensured backward compatibility for existing badges without tooltips ## GitHub Issue Link streamlit#12878 ## Testing Plan - Verified that badges with and without tooltips render correctly - Tested hover behaviour and tooltip positioning - Confirmed multi-badge and badges with text in Markdown still use inline tooltip - Confirmed no regressions in other Markdown-rendered elements --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

snyk-io · 2025-10-30T09:27:42Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

frontend/lib/src/components/elements/Markdown/Markdown.test.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

jrieke · 2025-10-30T22:25:03Z

Hey @marcolanfranchi! Thanks for the contribution. I just tried this out and it looks good from product side. Will pass this on to our engineers for code review.

marcolanfranchi · 2025-10-30T23:53:32Z

@jrieke No problem, thanks for trying it out!

Copilot

Pull Request Overview

This PR adds tooltip support to the st.badge() API, enabling users to display helpful information when hovering over badges. The implementation distinguishes between single badges (which use BaseButtonTooltip) and multiple badges or badges with additional text (which use inline tooltip icons).

Key changes:

Added help parameter to Python st.badge() function
Frontend logic detects single badges vs. multiple badges to render appropriate tooltip style
Comprehensive test coverage for badge tooltip behavior

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
lib/streamlit/elements/markdown.py	Added `help` parameter to `badge()` function with documentation and proto assignment
frontend/lib/src/components/elements/Markdown/Markdown.tsx	Added single-badge detection logic and conditional tooltip rendering (BaseButtonTooltip for single badges, inline tooltip for others)
frontend/lib/src/components/elements/Markdown/Markdown.test.tsx	Added three test cases covering badge tooltip scenarios: with tooltip, without tooltip, and multiple badges

lib/streamlit/elements/markdown.py

frontend/lib/src/components/elements/Markdown/Markdown.tsx

- Moved 'help' docstring below 'width' to match function signature order - Updated regex for markdown badges to correctly handle escaped brackets and backslashes in labels - Added new Markdown tests for badges with special characters and badges with additional text

marcolanfranchi · 2025-11-02T06:00:33Z

Hey @sfc-gh-bnisco, thanks for requesting a review. I tried out and implemented the suggested changes and added some more test cases to cover special markdown badge string cases. I appreciate the help!

Copilot

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

lib/streamlit/elements/markdown.py:479

The new help parameter for the badge function lacks Python unit test coverage. While the frontend tests cover the rendering behavior, there should be a test in lib/tests/streamlit/elements/markdown_test.py verifying that the help value is correctly set in the protobuf message when provided (and not set when None).

        if help is not None:
            badge_proto.help = help

frontend/lib/src/components/elements/Markdown/Markdown.tsx

- Added Python unit tests verifying 'help' parameter is correctly set in badge protobuf and omitted when None - Put single badge regex into a named constant with a descriptive comment that explains what it matches

Copilot

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

frontend/lib/src/components/elements/Markdown/Markdown.tsx

- Add a more detailed description of the single badge regex Co-authored-by: Copilot <[email protected]>

- Only run single-badge regex when help text is provided to avoid unnecessary regex execution on most renders

frontend/lib/src/components/elements/Markdown/Markdown.tsx

Copilot

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

frontend/lib/src/components/elements/Markdown/Markdown.tsx

…t description

Copilot

Pull Request Overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

frontend/lib/src/components/elements/Markdown/Markdown.test.tsx

marcolanfranchi · 2025-11-03T05:07:28Z

Skipping Copilot’s latest [nitpick] suggestions about test description, however I'm happy to adjust if reviewers prefer more detail.

sfc-gh-bnisco · 2025-11-03T18:02:18Z

Thanks @marcolanfranchi , I made a few small tweaks to this. Should be good to go once CI is green. Thank you for your contribution!

marcolanfranchi · 2025-11-03T18:17:03Z

@sfc-gh-bnisco Awesome, thanks for making those tweaks. And no problem, very glad I could contribute!

graphite-app bot reviewed Oct 30, 2025

View reviewed changes

marcolanfranchi mentioned this pull request Oct 30, 2025

Add help argument to st.badge #12878

Closed

2 tasks

marcolanfranchi and others added 2 commits October 30, 2025 02:53

Update frontend/lib/src/components/elements/Markdown/Markdown.test.tsx

5c0bff5

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Update frontend/lib/src/components/elements/Markdown/Markdown.test.tsx

e2dd9e6

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

marcolanfranchi changed the title ~~[feat] Add tooltip support for st.badge (#12878)~~ [feat] Add help argument and tooltip to st.badge Oct 30, 2025

marcolanfranchi and others added 4 commits October 30, 2025 09:38

Merge branch 'develop' into 12878_add_badge_help_tooltip

c279a27

Update frontend/lib/src/components/elements/Markdown/Markdown.test.tsx

2508bf1

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Merge branch 'develop' into 12878_add_badge_help_tooltip

2f2ad12

Update Badge 2 visibility check in Markdown tests

72ad521

jrieke added status:needs-product-approval PR requires product approval before merging change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Oct 30, 2025

jrieke added status:product-approved Community PR is approved by product team and removed status:needs-product-approval PR requires product approval before merging labels Oct 30, 2025

Merge branch 'develop' into 12878_add_badge_help_tooltip

e60d4e4

sfc-gh-bnisco requested a review from Copilot October 31, 2025 22:19

Copilot AI reviewed Oct 31, 2025

View reviewed changes

lib/streamlit/elements/markdown.py Outdated Show resolved Hide resolved

frontend/lib/src/components/elements/Markdown/Markdown.tsx Outdated Show resolved Hide resolved

marcolanfranchi and others added 3 commits October 31, 2025 19:01

Merge branch 'develop' into 12878_add_badge_help_tooltip

da50972

Merge branch 'develop' into 12878_add_badge_help_tooltip

a5035aa

marcolanfranchi requested a review from Copilot November 2, 2025 19:33

Copilot AI reviewed Nov 2, 2025

View reviewed changes

frontend/lib/src/components/elements/Markdown/Markdown.tsx Outdated Show resolved Hide resolved

Add Python unit tests for badge help parameter and refactor regex usage:

d939aac

- Added Python unit tests verifying 'help' parameter is correctly set in badge protobuf and omitted when None - Put single badge regex into a named constant with a descriptive comment that explains what it matches

marcolanfranchi requested a review from Copilot November 2, 2025 21:37

Copilot AI reviewed Nov 2, 2025

View reviewed changes

frontend/lib/src/components/elements/Markdown/Markdown.tsx Outdated Show resolved Hide resolved

frontend/lib/src/components/elements/Markdown/Markdown.tsx Outdated Show resolved Hide resolved

marcolanfranchi and others added 2 commits November 2, 2025 13:44

Update frontend/lib/src/components/elements/Markdown/Markdown.tsx

9ea7a46

- Add a more detailed description of the single badge regex Co-authored-by: Copilot <[email protected]>

Optimize Markdown single badge check:

63809e6

- Only run single-badge regex when help text is provided to avoid unnecessary regex execution on most renders

graphite-app bot reviewed Nov 2, 2025

View reviewed changes

frontend/lib/src/components/elements/Markdown/Markdown.tsx Show resolved Hide resolved

marcolanfranchi requested a review from Copilot November 2, 2025 22:02

Copilot AI reviewed Nov 2, 2025

View reviewed changes

frontend/lib/src/components/elements/Markdown/Markdown.tsx Outdated Show resolved Hide resolved

frontend/lib/src/components/elements/Markdown/Markdown.tsx Outdated Show resolved Hide resolved

Remove redundancy in isSingleBadgeOnly logic and clarify regex commen…

b7e3201

…t description

marcolanfranchi requested a review from Copilot November 3, 2025 04:53

Copilot AI reviewed Nov 3, 2025

View reviewed changes

Test best practices and remove usage of nested ternaries

4f70774

sfc-gh-bnisco added the security-assessment-completed Security assessment has been completed for PR label Nov 3, 2025

sfc-gh-bnisco approved these changes Nov 3, 2025

View reviewed changes

sfc-gh-bnisco added 2 commits November 4, 2025 14:32

Merge branch 'develop' into 12878_add_badge_help_tooltip

c7c832d

Merge branch 'develop' into 12878_add_badge_help_tooltip

8af23ec

sfc-gh-bnisco merged commit 01e5cbd into streamlit:develop Nov 5, 2025
35 checks passed

github-actions bot mentioned this pull request Dec 15, 2025

Tooltip shows text outside of the box when there are new lines in the help text #13339

Closed

4 tasks

[feat] Add help argument and tooltip to st.badge #12897

[feat] Add help argument and tooltip to st.badge #12897

Uh oh!

Conversation

marcolanfranchi commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link

Testing Plan

Uh oh!

snyk-io bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jrieke commented Oct 30, 2025

Uh oh!

marcolanfranchi commented Oct 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

marcolanfranchi commented Nov 2, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marcolanfranchi commented Nov 3, 2025

Uh oh!

sfc-gh-bnisco commented Nov 3, 2025

Uh oh!

marcolanfranchi commented Nov 3, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

marcolanfranchi commented Oct 30, 2025 •

edited

Loading

snyk-io bot commented Oct 30, 2025 •

edited

Loading