Question

135

How do I display a Hint box or Tooltip while the user is typing?

rated 0 times [ 139] [ 4] / answers: 1 / hits: 16003 / 12 Years ago, mon, october 29, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mariamiyanab

Add To Favorites

Follow

Total Points: 75

Total Questions: 102

Total Answers: 92

Location: British Indian Ocean Territory

Member since Tue, Feb 22, 2022

2 Years ago

answered 12 Years ago keric · Accepted Answer

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.