Tooltip is showed when MenuSurface container is closed

[MiquelRamis]

When I use a MenuSurface that appears when I press a button and disappears when I press one of the buttons included in this MenuSurface, I encounter a problem if I have tooltips linked to these buttons: if I move over these buttons and click one of them before the tooltip appears, the MenuSurface disappears with the buttons, and then the tooltip appears in a corner of the page.

<IconButton bind:this={opmenubutton} on:click={() => surface.setOpen(true) } size="button">
            <Icon component={Svg} viewBox="0 0 24 24">
                <path fill="green" d={ oper.icon }></path>
            </Icon>
</IconButton>
<MenuSurface bind:this={surface}  anchor={true}
            anchorCorner="BOTTOM_LEFT"
 >
            <div style="width: 40px; margin: 0.1em; display: flex; flex-direction: row; align-items: flex-end;">
                <SegmentedButton
                    segments={opers}
                    let:segment
                    singleSelect
                    bind:selected={oper}
                    key={(segment) => segment.name}
                >
                  <Wrapper>
                  <Segment {segment} on:click={() => closeToolBar(surface) }>
                      <Icon component={Svg} viewBox="0 0 24 24">
                          <path fill="currentColor" d={ segment.icon }></path>
                      </Icon>
                  </Segment>
                  <Tooltip showDelay={0} hideDelay={0} bind:this={ttref[segment.id]} yPos={segment.tooltippos}>{segment.name}</Tooltip>
                  </Wrapper>
              </SegmentedButton>
            </div>
</MenuSurface>

[uthraa-manickam]

Yes. I am facing the same issue. When element is clicked tooltip appears and if the element is removed from the screen the tooltip stays right where it was created. Cannot seem to remove it without refreshing the window. Very annoying and high priority bug.

[pboguslawski]

After hovering mouse over button with tooltip...

<Wrapper>
    <Button
        on:click={async () => {
            await goto('/other/page', {
                replaceState: false
            });
        }}
        variant="unelevated"
    >                       
        <Label>My Button</Label>
    </Button>
    <Tooltip>My Tip</Tooltip>
</Wrapper>

...and clicking this button without waiting for tooltip display, tooltip is displayed while new page is loading and stays displayed over new page.

Similar problem when clicking link with tooltip:

<a href="/other/page" use:Ripple={{ surface: true }}>
    <Wrapper>
            <small>My Label</small>
            <Tooltip>My Tooltip</Tooltip>
    </Wrapper>
</a>