Shows text over an input that disappears when the user clicks into it. The text remains hidden if the user adds a value.

Tutorial/Demo

Implements

Syntax

new OverText(input[, options]);

Arguments

  1. input - (mixed) a DOM Element (or its id) that should receive the hover text
  2. options - (object, optional) a key/value set of options

Options

  • positionOptions - (object) data passed to Element.position
  • poll - (boolean) whether to periodically re-evaluate the input to set their overtext element's position and visibility (useful for login in fields that are often populated by remembered usernames and passwords by the browser); defaults to false.
  • pollInterval - (integer) the duration between polling in milliseconds; defaults to 250

Events

  • onTextHide - (function) callback fired when an overtext element is hidden (passed the overtext element and the input element as arguments)
  • onTextShow - (function) callback fired when an overtext element is shown (passed the overtext element and the input element as arguments)

Hides the overtext element for a given input.

Syntax

myOverText.hide();

Returns

Shows the overtext element for a given input.

Syntax

myOverText.show();

Returns

Focuses the input and hides the overtext.

Returns

Repositions the overtext element over a the input.

Syntax

myOverText.reposition();

Returns

Begins repeatedly polling the input to position and show (or hide) the over text. Useful for login fields that are often autofilled by browsers.

Returns

Cancels the polling of the input.

Returns

This method calls OverText.reposition for all running instances of OverText. This allows you to manually re-assert the positioning and visibility of all the OverTexts on the page.

Syntax

OverText.update();

Note

This method is NOT a method on the instance. Rather it is on the namespace. So:

Example

var myOverText_1 = new OverText(...);
var myOverText_2 = new OverText(...);
//...later
OverText.update(); //updates all the instances of OverText

Returns

  • nothing

Extends the native Element object with a reference to its OverText instance.

Syntax

myInput.retrieve('OverText'); //the instance of OverText for the element