CSS工具提示位置不固定

Question

I have created a tooltip using CSS. When I hover on the image gets displayed but the position is not fixed; it depends on the size of the image.

Here is the 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>

Here is the 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%);
}

When I made the image responsive, the tooltip position keeps changing with each respective size of the images. How to make the position fixed? Please help me with this.

Answer 1

Here is my solution, Its not perfect, but it will give you a good staring point.

Basically I made the pointer div position:relative , and the tooltip position:absolute and also changed visibility:none to display:none .

Visiblilty just hides the div, but the element still occupies space in the DOM. display:none completely hides the div along with the space

And when you hover over the pointer div, I make the tooltip display:block

I removed the

 *{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> 

Try this. It works fine.