Tengo un formulario donde actualmente la etiqueta (elemento de intervalo) está separada de su campo de entrada (texto), pero como parte de un rediseño, se moverá al campo de entrada como una etiqueta flotante (ver jsfiddle a continuación). Sin embargo, también tenemos una información sobre herramientas que se muestra al pasar el mouse sobre la etiqueta, y cuando la etiqueta se movió al campo de entrada, el desplazamiento ya no se activa.

Obviamente, podría hacer que todo el campo de entrada o el div que lo abarca activara la información sobre herramientas o algo por el estilo, pero eso obstaculizaría la entrada real.

Así que estoy buscando una forma de hacer que se active solo en el texto de la etiqueta dentro del campo de entrada (donde sea que esté actualmente, ya que se mueve ligeramente según el enfoque), O alguna forma de integrar un icono en el campo de entrada que ser un punto de activación estático para la información sobre herramientas (que aún requeriría alguna forma de activar el desplazamiento sobre un elemento específico o un área limitada dentro del campo de entrada).

¿Es esto posible, o debo buscar una solución alternativa que involucre algo fuera del campo?

Este violín contiene la estructura básica y CSS para mostrar cómo se ve el campo: https://jsfiddle.net/xwoczh0a/

 <div class="form-textbox"> <input type="text" class="form-textbox-input" name="x" id="x" aria-labelledby="x_label" placeholder=" "> <span class="form-textbox-label" onmouseover="tooltip.show('Enter tooltip here');" onmouseout="tooltip.hide();" id="x_label" aria-hidden="true">Question goes here</span> </div>

Espero que esto tenga sentido, feliz de proporcionar más detalles si no.