[ Foro de Javascript ]

Ventana modal mouseover a un th

Hola a ver si alguien pudiera ayudarme estoy algo atascado, tengo una variación de tabla con unos elementos y quiero que al pasar el raton por encima de los th del thead salga una ventana modal, lo estoy haciendo en javascrip pero no consigo que salga, a ver si alguien puede ayudarme por favor. Os pego el codigo, lo he intentado de 3 formas y ninguna hace nada.
<script>
   if(document.getElementsByTagName("th")){
       var modal = document.getElementById("tvesModal");
       //var btn = document.getElementById("btnModal");
       var span = document.getElementsByClassName("close")[0];
       var body = document.getElementsByTagName("body")[0];
       //var titulosElts = document.getElementsByTagName("th");
       //var titulosElts = document.getElementById("variations-table-header-at-Best.-Nr.");
       var titulosElts = document.getElementsByClassName("woocommerce-product-attributes-item__label");
       var d1 = titulosElts;


       d1.onmouseover = function() {
           modal.style.display = "block";

           body.style.position = "static";
           body.style.height = "100%";
           body.style.overflow = "hidden";
       }

       //span.onclick = function() {
       //  modal.style.display = "none";

       //  body.style.position = "inherit";
       //  body.style.height = "auto";
       //  body.style.overflow = "visible";
   //  }

       window.onclick = function(event) {
           if (event.target == modal) {
               modal.style.display = "none";

               body.style.position = "inherit";
               body.style.height = "auto";
               body.style.overflow = "visible";
           }
       }
   }
</script>

<style>

   .modalContainer {
       display: none;
       position: fixed;
       z-index: 1;
       padding-top: 100px;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgb(0,0,0);
       background-color: rgba(0,0,0,0.4);
   }

   .modalContainer .modal-content {
       background-color: #fefefe;
       margin: auto;
       padding: 20px;
       border: 1px solid lightgray;
       border-top: 10px solid #58abb7;
       width: 60%;
   }

   .modalContainer .close {
       color: #aaaaaa;
       float: right;
       font-size: 28px;
       font-weight: bold;
   }

   .modalContainer .close:hover,
   .modalContainer .close:focus {
       color: #000;
       text-decoration: none;
       cursor: pointer;
   }


</style>
Con getElemetById si funciona pero hace que cuando pase por encima del th completo lo active, y el th tiene un texto y un filtro select y yo solo quiero que lo haga cuando pase por el texto ya que sino no puedo utilizar el filtro. La tabla esta tal que asi
<th id="variations-table-header-at-Best.-Nr." class="variations-table-header variations-table-header-at sorting_disabled" rowspan="1" colspan="1" style="width: 70px;">Best.-Nr.<select><option value="">Show All</option><option value="927 016">927 016</option><option value="927 020">927 020</option><option value="927 025">927 025</option></select></th>
Como veis donde sale el texto Best.-Nr no tiene etiqueta que pueda seleccionar con js, lo he intentado de todas formas y no lo consigo, por favor algo de ayuda.

Saludos muchas gracias.