0

tengo el siguiente dato:

Cambios: <b style="border-style:inset solid;border-width:2px;border-color:#ff6900;padding:0.2em 0.7em;">2</b>

<table>
  <tr>
    <td>1 Cambio</td>
  </tr>
  <tr>
    <td>2 Giro</td>
  </tr>
</table>

Como puedo hacer para que al colocar el cursor sobre el 2 me despliegue alli mismo la tabla que tiene los datos de cambio 1 y giro 2.

Seria algo parecido a esto:

introducir la descripción de la imagen aquí

de que manera podría hacerlo con css y html? muchas gracias por cualquier ayuda que me puedan aportar.

1
  • Si quieres añadir funcionalidad debes de hacerlo con Javascript el 30 may. 2020 a las 20:09

2 respuestas 2

1

Estimado, primero debemos saber varias cosas, lo que tu quieres hacer se llama "Hacer un Tooltip en CSS " .

En la siguiente imagen te dejo como ejemplo un Tooltip: Ejemplo de Tooltip 1

Pero que es un Tooltip?: Un tooltip proporciona información extra cuando el usuario pasa el cursor sobre un elemento.

En HTML Como se vería nuestro codigo :

<div class="tooltip top">Posa el ratón encima de mi
<span class="tiptext">Texto del tooltip</span>
</div>

En CSS como se veria nuestro codigo:

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}

Ahora debes agregar los CSS para las posiciones.

CSS para Tooltip arriba

.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;

CSS para Tooltip abajo

.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;

CSS para Tooltip izquierda

.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;

CSS para Tooltip derecha

.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;

si todo esto no te sirvió acá te dejo un link con mas informacion: LINK

1
  • perfecto me funciono perfectamente muchas gracias.
    – estrada
    el 1 jun. 2020 a las 15:17
0

Mira este ejemplo y adaptalo ejemplo

Adaptacion.

    <!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">



<div class="tooltip">Hover over me
  <table class="tooltiptext">
  <tr>
    <td>1 Cambio</td>
  </tr>
  <tr>
    <td>2 Giro</td>
  </tr>
</table>
</div>

</body>
</html>
3
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – Riaven
    el 31 may. 2020 a las 0:25
  • hare lo posible el 31 may. 2020 a las 0:39
  • @PacManProgramador muchas gracias por tu respuesta, también es útil. gracias por tu tiempo.
    – estrada
    el 1 jun. 2020 a las 15:17

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.