Hover of a select with javascript/jquery

Question

Good morning, I need to create an Hover in each selects option and I’m not able to do.

This select is done this way.

                  <select id="valorFiltro" style="width:350px" class="browser-default custom-select"> </select>
               

Function that generates the options.

                for (let index = 0; index < allLinhas.length; index++) {

                    var textoFormatado = allLinhas[index].split(' - ');
                    var linha = textoFormatado[1];

                    $('#valorFiltro').append(
                        ' <option value="' + allLinhas[index] + '"> ' + linha + '</option> '
                    );
                }

I needed that when I hovered over (Hover) the option would show the value of the line you know. Someone can help me?

Answer 1

You can use the attribute title HTML, which automatically is placed a tooltip with the text you put, which in the case is the same that you put in the value.

          for (let index = 0; index < allLinhas.length; index++) {

                var textoFormatado = allLinhas[index].split(' - ');
                var linha = textoFormatado[1];

                $('#valorFiltro').append(
                    ' <option value="' + allLinhas[index] + '" title="' + allLinhas[index] + '"> ' + linha + '</option> '
                );
            }

Source: https://www.w3schools.com/tags/att_global_title.asp