Popover with help and use_container_width is rendered correctly (#10709)

## Describe your changes

This fixes an issue where `use_container_width` is ignored if the `help`
parameter is passed to `st.popover` by ensuring
`element.useContainerWidth` is provided to `BaseButtonTooltip` as well
as `BaseButton`.

## GitHub Issue Link (if applicable)

Closes #10693

## Testing Plan

Adds some playwright tests similar to the existing `use_container_width`
tests but including the help option.

---

**Contribution License Agreement**

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

Author: sfc-gh-lwilby

e2e_playwright/__snapshots__/linux/st_popover_test/st_popover-use_container_width_with_help[dark_theme-chromium].png

@@ -27,6 +27,13 @@
 with st.popover("popover 2 (use_container_width)", use_container_width=True):
     st.markdown("Hello")
 
+with st.popover(
+    "popover 9 (use_container_width) with help",
+    use_container_width=True,
+    help="help text",
+):
+    st.markdown("Hello")
+
 with st.popover(
     "popover 3 (with widgets)",
 ):

e2e_playwright/__snapshots__/linux/st_popover_test/st_popover-use_container_width_with_help[dark_theme-firefox].png

@@ -27,7 +27,7 @@ def test_popover_button_rendering(
 ):
     """Test that the popover buttons are correctly rendered via screenshot matching."""
     popover_elements = themed_app.get_by_test_id("stPopover")
-    expect(popover_elements).to_have_count(8)
+    expect(popover_elements).to_have_count(9)
 
     assert_snapshot(
         get_popover(themed_app, "popover 5 (in sidebar)"), name="st_popover-sidebar"
@@ -57,6 +57,10 @@ def test_popover_button_rendering(
         get_popover(themed_app, "popover 8 (material icon)"),
         name="st_popover-material_icon",
     )
+    assert_snapshot(
+        get_popover(themed_app, "popover 9 (use_container_width) with help"),
+        name="st_popover-use_container_width_with_help",
+    )
 
 
 def test_popover_container_rendering(
@@ -96,6 +100,17 @@ def test_popover_with_use_container_width(app: Page):
     expect(popover_container).to_have_css("min-width", "704px")
 
 
+def test_popover_with_use_container_width_and_help(app: Page):
+    """Test that the popover container is correctly stretched to the button width
+    if `use_container_width=True` and `help` is provided."""
+    # Get the stretched popover container:
+    popover_container = open_popover(app, "popover 9 (use_container_width) with help")
+
+    expect(popover_container.get_by_test_id("stMarkdown")).to_have_text("Hello")
+    # Check that the min width is stretched to the full container width:
+    expect(popover_container).to_have_css("min-width", "704px")
+
+
 def test_applying_changes_from_popover_container(app: Page):
     """Test that changes made in the popover container are applied correctly."""
     # Get the widgets popover container:

e2e_playwright/__snapshots__/linux/st_popover_test/st_popover-use_container_width_with_help[dark_theme-webkit].png

@@ -80,4 +80,55 @@ describe("Popover container", () => {
     // Text should be visible now
     expect(screen.queryByText("test")).toBeVisible()
   })
+
+  it("should render correctly with use_container_width and help", async () => {
+    const user = userEvent.setup()
+    // Hover to see tooltip content
+    render(
+      <Popover
+        {...getProps({ help: "mockHelpText", useContainerWidth: true })}
+      />
+    )
+
+    // Ensure both the button and the tooltip target have the correct width
+    const popoverButtonWidget = screen.getByRole("button")
+    expect(popoverButtonWidget).toHaveStyle("width: 100%")
+    const tooltipTarget = screen.getByTestId("stTooltipHoverTarget")
+    expect(tooltipTarget).toHaveStyle("width: 100%")
+
+    // Ensure the tooltip content is visible and has the correct text
+    await user.hover(tooltipTarget)
+
+    const tooltipContent = await screen.findByTestId("stTooltipContent")
+    expect(tooltipContent).toHaveTextContent("mockHelpText")
+  })
+
+  it("should render correctly with help", async () => {
+    const user = userEvent.setup()
+    // Hover to see tooltip content
+    render(
+      <Popover
+        {...getProps({ help: "mockHelpText", useContainerWidth: false })}
+      />
+    )
+
+    // Ensure both the button and the tooltip target have the correct width
+    const popoverButtonWidget = screen.getByRole("button")
+    expect(popoverButtonWidget).toHaveStyle("width: auto")
+    const tooltipTarget = screen.getByTestId("stTooltipHoverTarget")
+    expect(tooltipTarget).toHaveStyle("width: auto")
+
+    // Ensure the tooltip content is visible and has the correct text
+    await user.hover(tooltipTarget)
+
+    const tooltipContent = await screen.findByTestId("stTooltipContent")
+    expect(tooltipContent).toHaveTextContent("mockHelpText")
+  })
+
+  it("passes useContainerWidth property without help correctly", () => {
+    render(<Popover {...getProps({ useContainerWidth: true })} />)
+
+    const popoverButtonWidget = screen.getByRole("button")
+    expect(popoverButtonWidget).toHaveStyle("width: 100%")
+  })
 })

e2e_playwright/__snapshots__/linux/st_popover_test/st_popover-use_container_width_with_help[light_theme-chromium].png

@@ -127,7 +127,10 @@ const Popover: React.FC<React.PropsWithChildren<PopoverProps>> = ({
         {/* This needs to be wrapped into a div, otherwise
         the BaseWeb popover implementation will not work correctly. */}
         <div>
-          <BaseButtonTooltip help={element.help}>
+          <BaseButtonTooltip
+            help={element.help}
+            containerWidth={element.useContainerWidth}
+          >
             <BaseButton
               data-testid="stPopoverButton"
               kind={BaseButtonKind.SECONDARY}