#container {
    position: relative;
}

img {
    display: block;
 }

.hot-rectangle {
    position: absolute;
    border: 1px solid red;
    background-color: transparent;
}

.hot-rectangle:hover .tooltip {
    display: inline-block;
}

.hot-rectangle-with-triangle {
    position: absolute;
    border: 1px solid red;
    background-color: transparent;
 }
  
  .hot-rectangle-with-triangle::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 5px 5px 0;
    border-style: solid;
    border-color: transparent #eb0b0b;
  }

  .hot-rectangle-with-triangle:hover .tooltip {
    display: inline-block;
}  
.tooltip {
    display: none;
    position: relative;
    padding: 10px 10px 10px 10px;
    border: 1px solid red;
    background-color: #a2d045;
    white-space: nowrap;
    font-size: 18px;

}

#click-coordinates {
    position: absolute;
    top: 0;
    left: 0;
    color: red;
    font-weight: bold;
    
}