Skip to content

DBTooltip not shown if any parent element has overflow:hidden #4040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 of 7 tasks
db-gspeck opened this issue Apr 9, 2025 · 0 comments
Open
1 of 7 tasks

DBTooltip not shown if any parent element has overflow:hidden #4040

db-gspeck opened this issue Apr 9, 2025 · 0 comments
Labels
👩‍👧‍👦community feedback Feedback from community

Comments

@db-gspeck
Copy link

Which generators are impacted?

  • All
  • HTML
  • React
  • Angular
  • Vue
  • Web components
  • Power Apps

Reproduction case

Please add a div around the Tooltip :

`


button

`

Tooltip is not shown anymore.

This issue was noticed by placing icons with tooltips into the header cells of a mui grid.

Expected Behaviour

The Tooltip should be shown in any context.

Screenshots

No response

Browser version

None

Add any other context about the problem here.

I added a possible solution for that.

It is a combination of popover api and anchor like mentioned in the following Issue:
#3452

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            margin: 200px auto;
            height: 88px;
            width: 600px;
            min-width: 300px;
            padding: 8px;
            border-radius: 6px;
            background: #eee;
            box-shadow: 1px 1px 3px #999;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            gap: 10px;
            overflow: hidden;
        }

        .buttons {

            gap: 10px;
            display: flex;
          flex-direction: row;
        }

        button {
            user-select: none;
            border: 1px solid #999;
            border-radius: 4px;
            background: #eee;
            flex: 1;
        }
        [popover="hint"] {
            inset: unset;
            border: 4px solid midnightblue;
            padding: 1rem;
            position: absolute;

            margin: 0;
        }

        .right {
            left: calc(anchor(right) + 2px);
            justify-self: anchor-left;
            align-self: anchor-center;
        }
        .left {
            right: calc(anchor(left) + 2px);
            justify-self: anchor-left;
            align-self: anchor-center;
        }
        .top {
            bottom: calc(anchor(top) + 2px);
            justify-self: anchor-center;
        }
        .bottom {
            top: calc(anchor(bottom) + 2px);
            justify-self: anchor-center;
        }

    </style>
</head>
<body>


<div class="container">
    Tooltips in overflow: hidden Context
    <div class="buttons">
        <button popovertarget="popover-left" onmouseover="showTooltip(this)" onmouseleave="hideTooltip(this)">
            Show Tooltip left
        </button>
        <button popovertarget="popover-top" onmouseover="showTooltip(this)" onmouseleave="hideTooltip(this)">
            Show Tooltip top
        </button>
        <button popovertarget="popover-bottom" onmouseover="showTooltip(this)" onmouseleave="hideTooltip(this)">
            Show Tooltip bottom
        </button>
        <button popovertarget="popover-right" onmouseover="showTooltip(this)" onmouseleave="hideTooltip(this)">
            Show Tooltip right
        </button>
    </div>
    <div id="popover-right" popover="hint" class="right">Tooltip with text</div>
    <div id="popover-left" popover="hint" class="left">Tooltip with text</div>
    <div id="popover-top" popover="hint" class="top">Tooltip with text</div>
    <div id="popover-bottom" popover="hint" class="bottom">Tooltip with text</div>

</div>



<script type="text/javascript">
function showTooltip(self) {
    self.popoverTargetElement.showPopover({source: self});
}
function hideTooltip(self) {
    self.popoverTargetElement.hidePopover()
}

</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
👩‍👧‍👦community feedback Feedback from community
Projects
UX Engineering Team Backlog
Status: 📋 Backlog
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nmerget @db-gspeck