Floating help box with jQuery UI tooltip

jQuery UI has a nice tooltip widget. This widget is used to display a theamable tooltip for elements on a web page. That is the primary and intended use of the tooltip widget. However this widget can be innovatively used to display a startup help box.

Startup helpbox is used to display a quick instruction to the user. It is intended to get user started with the website or application. This help box disappears as soon as user starts using the application by typing, clicking etc. Lets consider a simple application that gets a string from user and shows length of the string. A startup help box could say, “Enter text below to see the number of characters entered.” The help box would disappear as soon as user starts typing in the text box. There would be a help button that when hovered would show the help box again. Lets see how to create such a help box.

To use jQuery UI tooltip, include jQuery UI library in your webpage. Normally, to create a tooltip for an element, title attribute is set on the this element and the tooltip widget is initialised on this element. The tooltip appears when mouse is hovered over this element.

However the startup help box would apppear as soon as the page loads whether or not the intended element is hovered or not. Also the tooltip would disappear when user starts to interact with the page. To achieve this, set the title attribute on a completely different element. For our string length web application, set the title attribute on the help button. Set the message that should be displayed in the help box as value of the title attribute. Also create a text input box where user would enter string.

<input id="stringInput"></input>
<span id="helpbutton" title="Enter text to find out number of characters entered">?</span>

Initialise the tooltip and set position on the intended element.  This would associate the tooltip with the help button but we want to see the tooltip next to the input text box. Hence set the position of the tooltip to the right hand side of the input text box. Unlike the simple tooltip, the help box should open on page load. This is achieved by calling open on the tooltip.

$("#helpbutton").tooltip({position: {of: "#stringInput", at: "right"}});
$("#helpbutton").tooltip("open");

The help box should close when user starts to type in the input box. Call close on the tooltip on keyup event of the input box. The help box is also closed when user clicks on the input box.

$("#stringInput").keyup(function()
{
    $("#helpbutton").tooltip("close");
});
$("#stringInput").click(function()
{
    $("#helpbutton").tooltip("close");
});

That is it! A simple trick to place a tooltip on a different element and opening and closing the tooltip on page load and click event creates a nice startup help box.

 

Photo credit: Mykl Roventine / Foter.com / CC BY-NC-SA