Description
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>
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
🕋 In progress