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

javascript html css tooltip typescript

15,422

Solution 1

Something like this might help you:

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

Solution 2

You can use “CSS tooltips” in many ways. A relatively simple idea is to place the hint content in a div, initially hidden with CSS, right before the field. Then you need an onfocus event handler that changes that div to visible (and an onblur handler that makes it invisible again). You would have a container for the hint and the field and declare that container as relatively position, to make it possible to position the hint “absolutely” (that is, relatively to the container).

Example (jsfiddle):

<!DOCTYPE HTML>
<meta charset=utf-8>
<style>
.textfield {
  position: relative;
}
.textfield .hint {
  display: none;
  position: absolute;
  width: 10em;
  bottom: 1.3em;
  background: #ff9;
  padding: 0 0.2em;
  border: solid 1px;
}
</style>
<script>
function hint(elem) {
  elem.parentNode.firstElementChild.style.display = 'block';
}
function unhint(elem) {
  elem.parentNode.firstElementChild.style.display = 'none';
}
</script>
<p>This is just some filler text.
<table>
<tr>
  <td><label for=bar>Bar</label>
  <td>
  <div class=textfield>
  <div class=hint>This is hint text for the Bar field.</div>
  <input id=bar name=bar onfocus="hint(this)" onblur="unhint(this)">
  </div>
<tr>
  <td><label for=foo>Foo</label>
  <td>
  <div class=textfield>
  <div class=hint>This is hint text for the Bar field.</div>
  <input id=foo name=foo onfocus="hint(this)" onblur="unhint(this)">
  </div>
</table>

(When using a table to structurize your form, in this approach you need to remember that a CSS positioning does not work for table cells. This is why you cannot use the td element as wrapper but need to use div inside it.)

15,422

Author by

Arrow

Updated on June 05, 2022

Comments

Arrow almost 2 years

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.