Ventana modal mouseover a un th

[ivanchu83]

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.

Código:

<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

Código:

<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.