Question

我已经使用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%);
}

当我使图像响应时，工具提示位置会随着图像的各个大小而不断变化。如何确定职位？请帮助我。

Answer 1

这是我的解决方案，它不是完美的方法，但是它将给您一个很好的凝视点。

基本上，我制作了pointer格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>

Answer 2

.pointer img {
     cursor: pointer;
     position: relative;
     display: inline-block;
     margin-bottom: 7px;
}
 .pointer .img-box {
     position:relative;
}
 .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;
}
 .img-box:hover .tooltiptext {
     visibility: visible;
     right: calc( 0% - 60px);
     top: -30px;
}
 .responsive {
     max-width: 100%;
     height: auto;
}
 .imagewh{
     text-align:center;
     width: 110px;
     height: 110px;
}
 .imagewh img{
     position:relative;
}

<br>
<br>


<div class="pointer  imagewh">
  <div class="img-box">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLsza5efhXDC69Ka0TuAMa1bfm2tbtUHXKVSKn3yzgVoiXbu6A" class="responsive" />
    <span class="tooltiptext">Upload Icon</span>
  </div>
</div>

尝试一下。很好。

CSS工具提示位置不固定

2 个答案: