Question

I have about 1000 Textfields on our page, and need to display a Tooltip above the textfield that the user is currently typing in.

It sounds simple, but I’m having difficulty figuring out how to display it on top of everything else on the page and without breaking flow of the document.

I can’t use any external libraries for this either, which makes it a little more difficult. I am only allowed to use pure JS (or a language that compiles to pure JS, such as TypeScript).

Does anyone have any links, tutorials or anything like that? It would be very helpful.

Thank you

Edit:
I am aware that you can use the Title attribute on an element, however this tooltip needs to have more than just text inside it and needs to be bigger and directly above the textbox.

Answer 1

Something like this might help you:

http://jsfiddle.net/ysuw5/

<div id="container">
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf2" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf3" /><br />
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf4" /><br />

    <div id="tooltip"></div>
</div>

function theFocus(obj) {
    var tooltip = document.getElementById("tooltip");
    tooltip.innerHTML = obj.title;
    tooltip.style.display = "block";
    tooltip.style.top = obj.offsetTop - tooltip.offsetHeight + "px";
    tooltip.style.left = obj.offsetLeft + "px";
}

function theBlur(obj) {
    var tooltip = document.getElementById("tooltip");
    tooltip.style.display = "none";
    tooltip.style.top = "-9999px";
    tooltip.style.left = "-9999px";
}

This is clearly very narrow-minded and would need to be modified to fit exactly what you need. I didn’t bother binding the focus and blur events with Javascript – it would be better than putting them in the HTML.