0

En html necesito que al sobrevolar sobre las opciones de un menú aparezca un cuadro de texto explicando que hay en cada

  • un ejemplo de menu el que se muestra en la imagen, quisiera que al sobrevolar cada etiqueta
  • apareciera un cuadro con un texto explicativo como se muestra en la imagen al sobrevolar "carteles" si el texo explicado es largo, no me gusta en una sola línea, me gustaría como en la foto que p.e. ocupa 3 líneas aqui hay información pero no se acabarlo de adaptar: tooltips

    menu con descripcion en cada <li>

    este es el codigo que tengo:

        .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
        
    .menu li {
        padding: 8px;
        margin-bottom: 4px;
        background-color: #434343;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
        
        
    .menu li:hover {
        background-color: #191919;
        color: deeppink;
    }
    <div class="col-3 col-m-3 menu">
      <ul>
        <li>Bolsas para tiendas</li>
        <li>Cartas restaurante</li>  
        <li>Carteles</li>
        <li>Carpetas</li>
        <li>Etiquetas perforadas</li> 
        <li>Etiquetas adhesivas</li>     
       </ul>

    1 respuesta 1

    3

    te recomiendo que siempre pongas lo que llevas de tu codigo para que sea mas facil ayudarte.

    te dejo este ejemplo utilizando tu referencia y el codigo que has actualizado, espero te sirva:

    Ejemplo Demo

    Saludos.

    3
    • gracias por ayudarme! pero no se insertarlo en las etiquetas <li>, he subido el codigo como me has dicho
      – Basicmix
      Commented el 11 mar. 2018 a las 15:38
    • @Basicmix he actualizado la respuesta cambiando el demo con tu codigo, saludos.
      – DMG
      Commented el 11 mar. 2018 a las 15:53
    • muchísimas gracias! funciona perfectamente!!!
      – Basicmix
      Commented el 11 mar. 2018 a las 17:05

    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.