jQuery UI & Tooltips: Form

This entry is part 5 of 7 in the series jQuery UI Tooltips

jQuery UI Tooltip – Forms

Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.

A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Forms</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        label {
            display: inline-block;
            width: 5em;

        fieldset div {
            margin-bottom: 2em;

        fieldset .help {
            display: inline-block;

        .ui-tooltip {
            width: 210px;
        $(function () {
            var tooltips = $('[title]').tooltip();
                    .text('Show help')
                    .click(function () {

            <label for='firstname'>Firstname</label>
            <input id='firstname' name='firstname' title='Please provide your firstname.'>
            <label for='lastname'>Lastname</label>
            <input id='lastname' name='lastname' title='Please provide also your lastname.'>
            <label for='address'>Address</label>
            <input id='address' name='address' title='Your home or work address.'>

Try The Code
Series Navigation<< jQuery UI & Tooltips: Custom content
jQuery UI & Tooltips: Video player >>

Leave a comment

Leave a Reply