Simple Input Tooltip with Pure JavaScript & CSS – tooltipwidget

A dead simple JavaScript library that appends hint boxes & tooltips to the text fields as the user starts typing.

It supports blur / focus events and automatically generates tooltips from title attribute.

How to use it:

Load the tooltip.css in the header.  You can override the styles yourself by adding your owns in the CSS.

<link rel="stylesheet" href="tooltip.css">

Create tooltip content using ‘title’ attribute and add the class ‘showTooltip’ to your input field to display a normal tooltip.

<input class="showTooltip" title="I have a tooltip">

Use the class ‘showErrorTooltip’ to create an ‘error’ tooltip.

<input class="showErrorTooltip" title="I have an error tooltip"  />

Load the tooltip.js JS library at the bottom of the document.

<script src="tooltip.js"></script>