2

He creado un Block, un shortcode en que he añadido un icono mediante html. Este block luego lo añadiré a un formulario de checkout, pero al ver el resultado antes de utilizarlo, veo que atraviesan horizontalmente el icono una serie de puntitos en linea.

Hice una captura de pantalla pero se distinguen muy mal.

Se pueden ver tambien ejecutando el código de muestra, en la parte izquierda del icono

introducir la descripción de la imagen aquí

No se si el css que utilizo sera el más correcto para conseguir mi proposito, espero me den ideas de como hacerlo mejor.

Tengo dos problemas:

1 - es la linea de puntos que se ve en la imagen y

2 - ¿ que debo hacer para centrar este icono cuando el shortcode lo añada en el formulario y no condicione el resto de elementos Imagino que tendrá que ver con el css, por lo que trate de añadir text-decoration: none; como si de un enlace se tratara, pero solo es una imagen

¿ Como centrar el icono teniendo en cuenta que sera de 40px por 40 px aproximadamente y que rompa el resto de elementos del formulario ?

¿ Como eliminar la linea de puntos del icono ?

Vean los errores del código, he creado un body, para que se pueda ver correctamente el ejemplo, pero eso css debería remplazarlo:

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);
  width: 20px;
  height: 20px;
}
.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"/>
  <span class="tiptext">
    esto es necesario para facilitar su experiencia
    </span>
  </div>
</body>

1 respuesta 1

2

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>

5
  • Gracias por tu rápida ayuda. El problema es que edite el código añadiendo el tuyo, pero el icono sigue creando un espacio enorme en la parte superior y la parte inferior, con de 200 o 300 px, en pantalla son 15 cm. ¿ Como puedo corregir esto ? No quiero que desplace el resto de elemntos de la pagina donde lo añada
    – gemita
    Commented el 3 mar. 2023 a las 15:09
  • 1
    Que extraño, cuando inspeccionas tu imagen en el navegador, ¿Cuánto de ancho tiene?, debería funcionar con el width="20px" que está en la imagen... me gustaría poder visualizar el error que tienes (y que adjuntes el HTML para poder reproducirlo). Commented el 3 mar. 2023 a las 15:11
  • vaya, te ruego que me disculpes, el espacio superior e inferior a desaparecido, unicamente el icono se muestra en la parte izquierda de la pantalla como se ve en la captura Pero esto no creo que suponga un problema cuando lo añada su sitio. Aun no tengo la función para añadirlo a billing_phone del checkout. Gracias por tu apoyo
    – gemita
    Commented el 3 mar. 2023 a las 15:23
  • 1
    Recuerda verificar la respuesta si te sirvió dándole al ✔️ para que tu pregunta esté como respondida. Recuerda que si tienes otro problema, puedes realizar otra pregunta, de lo contrario mi respuesta perdería sentido. Saludos. Commented el 3 mar. 2023 a las 15:24
  • Por supuesto, disculpa que no lo haya echo. Gracias Ya tengo otra pregunta echa es.stackoverflow.com/questions/585238/…
    – gemita
    Commented el 3 mar. 2023 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.