El problema de los puntos se debe a que en esta clase le estás dando esta propiedad border-bottom
, y la verdad no entiendo para que está ya que no se visualiza en ninguna otra parte aparte de esos puntos:
.tooltip {
position: relative;
display: inline-block;
/* border-bottom: 1px dotted rgb(175, 76, 6); */
width: 20px;
height: 20px;
}
Y lo de centrar el ícono, ya lo está, pero no lo visualizas ya que tu ícono mide 80 x 80
, y este se sale de su contenedor tooltip
. Tendrías
Solamente tendrías que quitar el width
y height
de tooltip
y darle estas propiedades a la imagen (que es tu ícono):
<!-- bastaría con un ancho -->
<img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
Código:
body {
align-items: center;
display: flex;
flex-flow: column nowrap;
height: 100vh;
justify-content: center;
}
.tooltip {
position: relative;
display: inline-block;
/* border-bottom: 1px dotted rgb(175, 76, 6); */
}
.tooltip .tiptext {
visibility: hidden;
width: 120px;
background-color: rgb(93, 69, 4);
color: #fff;
text-align: center;
border-radius: 3px;
padding: 6px 0;
position: absolute;
z-index: 1;
box-shadow: 0 5px 10px rgb(93, 69, 4);
}
.tooltip .tiptext::after {
content: "";
position: absolute;
border-width: 5px;
border-style: solid;
}
.tooltip:hover .tiptext {
visibility: visible;
}
.tooltip.top .tiptext{
margin-left: -60px;
bottom: 150%;
left: 50%;
}
.tooltip.top .tiptext::after{
margin-left: -5px;
top: 100%;
left: 50%;
border-color: rgb(93, 69, 4) transparent transparent transparent;
}
<body>
<div class="tooltip top">
<img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
<span class="tiptext">
esto es necesario para facilitar su experiencia
</span>
</div>
</body>