Question

当用户将鼠标悬停在图像项目上时，我想显示带有项目名称的工具提示。项目显示在带有滚动条的网格内（class="itemGrid"，项目本身是 class="itemOnGrid"）。

我在互联网上尝试了很多解决方案，但是我现在正在学习 CSS 并且我无法解决我的问题。

HTML

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;

}

CSS

Origin

项目是JS添加的，我写了3个硬编码的例子。

工具提示被截断的图片：

Image of tooltip being cutted off

提前致谢！

Answer 1

恐怕在您的情况下，您无法仅用 css 来解决。由于 overflow:hidden 切断了它之外的一切。您可能可以从 position:relative 类中删除 itemOnGrid，但是您的所有工具提示最终都会出现在同一个位置 - 我真的怀疑您是否想手动定位所有这些提示。我的解决方案是将 javascript 用于工具提示位置（并更改其文本）。我确实稍微更改了元素的位置，还为新视图相应地编辑了 css。元素的副本仅用于演示目的。

现在的解决方案基本上是这个函数prepare，我将事件监听器分配给每个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>

工具提示被外部 div 部分遮挡

1 个答案: