I have a form where currently the label (span element) is separate from its input (text) field, but as part of a redesign it will move into the input field as a floating label (see jsfiddle below). However we also have a tooltip that shows on hover (onmouseover) over the label, and when the label moved into the input field the hover no longer triggers.

Obviously I could make the entire input field or the encompassing div trigger the tooltip or something to that effect, but that would get in the way of the actual input.

So I am looking for either a way to make it trigger on only the label text within the input field (wherever it may currently be, since it moves slightly based on focus), OR some way to integrate an icon into the input field that would be a static trigger point for the tooltip (which would still require some way of triggering hover on a specific element or limited area within the input field).

Is this even possible, or should I look for an alternative solution involving something outside the field?

This fiddle contains the basic structure and CSS to show what the field looks like: 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>

I hope this makes sense, happy to provide more details if not.