我使用 CSS 创建了一个工具提示。当我将鼠标悬停在图像上时会显示但位置不固定;这取决于图像的大小。
这是 HTML:
<section class="col col-2">
<input type="file" id="imgupload" accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" style="display:none"
/>
<div class="pointer imagewh">
<img type="image" data-ng-src="{{currIcon}}" ng-click="icon()" class="responsive" />
<span class="tooltiptext">Upload Icon</span>
</div>
</section>
这是 CSS:
.pointer img {
cursor: pointer;
position: relative;
display: inline-block;
margin-bottom: 7px;
}
.pointer .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.pointer:hover .tooltiptext {
visibility: visible;
}
.responsive {
max-width: 100%;
height: auto;
}
.imagewh{
text-align:center;
width: 110px;
height: 110px;
}
.imagewh img{
position:relative;
top:50%;
transform: translateY(-50%);
}
当我使图像响应时,工具提示位置会随着图像的各个尺寸而不断变化。如何固定位置?请帮我解决这个问题。
最佳答案
这是我的解决方案,它并不完美,但它会给你一个很好的凝视点。
基本上我制作了 pointer
div position:relative
和工具提示 position:absolute
并且还更改了 visibility:none
到 display:none
。
可见性 只是隐藏了 div,但元素仍然占据 DOM 中的空间。 display:none
完全隐藏 div 和空格
当你将鼠标悬停在 pointer
div 上时,我会生成 tooltip
display:block
我删除了
*{box-sizing:border-box;}
body{padding:100px;}
.pointer{
position:relative;}
.pointer img {
cursor: pointer;
position: relative;
display: inline-block;
margin-bottom: 7px;
width: 100%;
height: 100%;
}
.pointer .tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top:-30px;
left:50%;
transform:translateX(-50%);
}
.pointer:hover .tooltiptext {
display:block;
}
.responsive {
max-width: 100%;
height: auto;
}
.imagewh {
text-align: center;
width: 110px;
height: 110px;
border:1px solid black;/*for testing purpose*/
}
.bigimage{
width: 210px;
height: 210px;
}
<div class="pointer imagewh">
<img type="image" data-ng-src="https://placehold.it/100x100" class="responsive" />
<span class="tooltiptext">Upload Icon</span>
</div>
<br/><br/>
<div class="pointer imagewh bigimage">
<img type="image" data-ng-src="https://placehold.it/200x200" class="responsive" />
<span class="tooltiptext">Upload Icon</span>
</div>
关于javascript - css 工具提示位置不固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51889232/