Tooltip Hover

HTML

<body style="text-align:center;">

<br>
<br>
<br>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Antofagasta</span>
</div>

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/MmaChile.png" class="image">
  <span class="tooltiptext2">Antofagasta</span>
</div>

</body>

CSS

.container {
  position: relative;
  width: 15%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.container {
  position: relative;
}

.container .tooltiptext2 {
    visibility: hidden;
    width: 150%;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 110%;
    font-size: 150%;
    font-family: Arial;

    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.container .tooltiptext2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.container:hover .tooltiptext2 {
    visibility: visible;
    opacity: 1;
}


/****************************** TEXTO ***************************/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    font-weight: bold;
    font-size: 150%;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150%;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 110%;
    font-size: 150%;
    font-family: Arial;

    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}