Skip to main content
se añadieron 115 caracteres en el cuerpo
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

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

introducir la descripción de la imagen aquí

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>

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

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.

introducir la descripción de la imagen aquí

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>

Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

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