How to make a text box appear when flying over the options of a menu in html5?

Navigation
0

In html I need that when flying over the options of a menu, a text box appears explaining what is in each

  • An example of a menu that is shown in the image, I would like you to fly over each label
  • a box with an explanatory text appears as shown in the image when flying over "posters" If the text explained is long, I do not like it in a single line, I would like as in the photo that p.e. occupies 3 lines Here there is information but it is not finished to adapt: tooltips

    this is the code I have: 

        .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>
        
    • asked by Basicmix 11.03.2018 в 15:13
    source

    1 answer

    3

    I recommend that you always put what you have in your code to make it easier to help you.

    I leave this example using your reference and the code you have updated, I hope you serve:

    Demo Example

    Greetings.

        
    answered by 11.03.2018 / 16:08
    source
    separate string in each capital letter or number Drag of arrays in this game is not going