工具提示部分被外部 div 遮挡
Tooltip partially obscured by outer div
我想在用户将鼠标悬停在图像项目上时显示带有项目名称的工具提示。这些项目显示在带有滚动条的网格内（class="itemGrid" 并且项目本身是 class="itemOnGrid"）。
我已经在互联网上尝试了很多解决方案，但是我现在正在学习 CSS，但我无法解决我的问题。
HTML
<body>
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a><span class="tooltiptext">Giant Sword</span></div>
</div>
</div>
<div class='sets'></div>
</div>
</center>
<script src='main.js'></script>
</body>
CSS
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.itemOnGrid .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.itemOnGrid .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.itemOnGrid:hover .tooltiptext {
visibility: visible;
z-index: 1;
}
项目是JS添加的，我写了3个硬编码的例子。
工具提示被截断的图片：
提前致谢！
恐怕，在您的情况下，仅靠 css 无法解决问题。
因为 overflow:hidden 切断了它之外的一切。
您可能会从 itemOnGrid class 中删除 position:relative，但是您所有的工具提示最终都会出现在同一个地方——我真的怀疑您是否想手动定位所有这些工具提示。
我的解决方案是使用 javascript 作为工具提示位置（并更改其文本）。
我确实稍微更改了元素的位置，还针对新视图相应地编辑了 css。
元素的副本仅用于演示目的。
现在的解决方案基本上就是这个函数 prepare，我将 eventListeners 分配给每个 itemOnGrid。在此 eventListener 中，我读取了已悬停的元素的位置并移动（并更改了工具提示的文本）。我真的不关心这里工具提示的完美位置，所以你可能想玩一下。
function prepare(){
let items = document.getElementsByClassName('itemOnGrid');
for(let i = 0; i < items.length; i++){
items[i].addEventListener('mouseover', function(){
let tooltip = document.getElementById('tooltip');
let top = this.offsetTop;
let left = this.offsetLeft;
tooltip.style.top = top-30+'px';
tooltip.style.left = left-35+'px';
tooltip.style.display = 'block';
tooltip.innerText = this.getAttribute('itemName');
});
items[i].addEventListener('mouseout', function(){
let tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
}
};
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
<body onload="prepare()">
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
</div>
<span id='tooltip' class="tooltiptext">Giant Sword</span>
</div>
<div class='sets'></div>
</div>
</center>
</body>
我想在用户将鼠标悬停在图像项目上时显示带有项目名称的工具提示。这些项目显示在带有滚动条的网格内（class="itemGrid" 并且项目本身是 class="itemOnGrid"）。
我已经在互联网上尝试了很多解决方案，但是我现在正在学习 CSS，但我无法解决我的问题。
HTML
<body>
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a><span class="tooltiptext">Giant Sword</span></div>
</div>
</div>
<div class='sets'></div>
</div>
</center>
<script src='main.js'></script>
</body>
CSS
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.itemOnGrid .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.itemOnGrid .tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.itemOnGrid:hover .tooltiptext {
visibility: visible;
z-index: 1;
}
项目是JS添加的，我写了3个硬编码的例子。
工具提示被截断的图片：
提前致谢！
恐怕，在您的情况下，仅靠 css 无法解决问题。
因为 overflow:hidden 切断了它之外的一切。
您可能会从 itemOnGrid class 中删除 position:relative，但是您所有的工具提示最终都会出现在同一个地方——我真的怀疑您是否想手动定位所有这些工具提示。
我的解决方案是使用 javascript 作为工具提示位置（并更改其文本）。
我确实稍微更改了元素的位置，还针对新视图相应地编辑了 css。
元素的副本仅用于演示目的。
现在的解决方案基本上就是这个函数 prepare，我将 eventListeners 分配给每个 itemOnGrid。在此 eventListener 中，我读取了已悬停的元素的位置并移动（并更改了工具提示的文本）。我真的不关心这里工具提示的完美位置，所以你可能想玩一下。
function prepare(){
let items = document.getElementsByClassName('itemOnGrid');
for(let i = 0; i < items.length; i++){
items[i].addEventListener('mouseover', function(){
let tooltip = document.getElementById('tooltip');
let top = this.offsetTop;
let left = this.offsetLeft;
tooltip.style.top = top-30+'px';
tooltip.style.left = left-35+'px';
tooltip.style.display = 'block';
tooltip.innerText = this.getAttribute('itemName');
});
items[i].addEventListener('mouseout', function(){
let tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
}
};
body {
/*background: linear-gradient(#252526, #1e1e1e);*/
background: url(img/wp_soulwar.jpg);
height: 1000px;
align-content: center;
}
h1 {
font-size: 72px;
color: #d2b90a;
}
#instructions {
width:1588px;
height: 100px;
background-color:rgb(24,25,25,0.90);;
border:solid gray 1px;
border-radius: 2px;
padding-left: 10px;
}
p {
text-align: left;
color: white;
}
.container {
display: inline-flex;
flex-direction: row;
gap: 20px;
width:1600px;
height:600px;
background-color: transparent;
margin-top: 20px;
}
.menu {
order: 1;
width:248px;
height:598px;
background-color:rgb(24,25,25,0.90);
border:solid gray 1px;
border-radius: 2px;
}
.items {
order: 2;
width:578px;
height:573px;
background-color:rgb(24,25,25,0.9);
border:solid gray 1px;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 20px;
position: relative;
}
#searchBox{
float: left;
margin-left:6px;
font-size: 15px;
color: gray;
width: 400px;
height: 20px;
background: url(img/loupe.png) no-repeat;
background-position: 3px;
padding-left: 25px;
background-color: rgb(24,25,25);
border: gray solid 1px;
}
.itemGrid {
margin-top: 6px;
display: inline-flex;
align-content: flex-start;
flex-flow: row wrap;
width:568px;
height:545px;
background:transparent;
border-radius: 2px;
overflow-y: hidden;
overflow-x: hidden;
}
.itemGrid:hover {
overflow-y: scroll;
}
.itemOnGrid{
margin-right: 3px;
border: gray solid 1px;
margin-bottom: 3px;
width: 34px;
height: 34px;
background-color: rgb(24,25,25);
opacity: 1;
display: inline-block;
position: relative;
}
/* Tooltip text */
.tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
border: gray 1px solid;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
<body onload="prepare()">
<center>
<h1>TIBIA SET BUILDER</h1>
<div id='instructions'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius lorem. Sed in volutpat orci, id placerat neque. <br>
Nullam ipsum ante, maximus et scelerisque vel, auctor a elit. Nullam neque arcu, venenatis vel elit a, pharetra interdum ipsum.<br>
Aenean nisi sapien, ultricies id mollis ut, sagittis ac erat. Fusce id augue tempus, volutpat orci nec, pretium lectus. Fusce eu diam eros.
Donec hendrerit mattis eros, sed aliquam justo. Duis et fermentum sapien. Duis finibus sem vel augue facilisis ornare.</p>
</div>
<div class='container'>
<div class='menu'></div>
<div class='items'>
<input type="text" id="searchBox" placeholder="Soulstrider, Abyss Hammer, etc...">
<div class='itemGrid' id='scrollbarItems'>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword1><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword2><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword3><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword4><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword5><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword6><a href=''><img src=Giant_Sword.gif></a></div>
<div class="itemOnGrid" itemName=Giant_Sword7><a href=''><img src=Giant_Sword.gif></a></div>
</div>
<span id='tooltip' class="tooltiptext">Giant Sword</span>
</div>
<div class='sets'></div>
</div>
</center>
</body>