jQuery UI & Tooltips: Basic tooltips

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

jQuery UI Tooltip – Default functionality

Hover the links above or use the tab key to cycle the focus on each element.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Default functionality</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $(document).tooltip();
        });
    </script>
    <style>
        label {
            display: inline-block;
            width: 5em;
        }
    </style>
</head>
<body>

<p><a href='#' title='That's what this widget is'>Tooltips</a> can be attached to any element. When you hover
    the element with your mouse, the title attribute is displayed in a little box next to the element, just like a
    native tooltip.</p>

<p>But as it's not a native tooltip, it can be styled. Any themes built with
    <a href='http://themeroller.com' title='ThemeRoller: jQuery UI's theme builder application'>ThemeRoller</a>
    will also style tooltips accordingly.</p>

<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>

<p><label for='age'>Your age:</label><input id='age' title='We ask for your age only for statistical purposes.'></p>

<p>Hover the field to see the tooltip.</p>

</body>
</html>
Try The Code

The lineĀ 

$(document).tooltip();

means that the tooltip property is applied to the whole document.

jQuery UI & Tooltips: Custom styling

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

jQuery UI Tooltip – Custom Styling

Hover the links above or use the tab key to cycle the focus on each element.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Custom Styling</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $(document).tooltip({
                position: {
                    my: 'center bottom-20',
                    at: 'center top',
                    using: function (position, feedback) {
                        $(this).css(position);
                        $('<div>')
                                .addClass('arrow')
                                .addClass(feedback.vertical)
                                .addClass(feedback.horizontal)
                                .appendTo(this);
                    }
                }
            });
        });
    </script>
    <style>
        .ui-tooltip, .arrow:after {
            background: black;
            border: 2px solid white;
        }

        .ui-tooltip {
            padding: 10px 20px;
            color: white;
            border-radius: 20px;
            font: bold 14px 'Helvetica Neue', Sans-Serif;
            text-transform: uppercase;
            box-shadow: 0 0 7px black;
        }

        .arrow {
            width: 70px;
            height: 16px;
            overflow: hidden;
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: -16px;
        }

        .arrow.top {
            top: -16px;
            bottom: auto;
        }

        .arrow.left {
            left: 20%;
        }

        .arrow:after {
            content: '';
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 6px 5px 9px -9px black;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            tranform: rotate(45deg);
        }

        .arrow.top:after {
            bottom: -20px;
            top: auto;
        }
    </style>
</head>
<body>

<p><a href='#' title='That's what this widget is'>Tooltips</a> can be attached to any element. When you hover
    the element with your mouse, the title attribute is displayed in a little box next to the element, just like a
    native tooltip.</p>

<p>But as it's not a native tooltip, it can be styled. Any themes built with
    <a href='http://themeroller.com' title='ThemeRoller: jQuery UI's theme builder application'>ThemeRoller</a>
    will also style tooltips accordingly.</p>

<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>

<p><label for='age'>Your age:</label> <input id='age' title='We ask for your age only for statistical purposes.'></p>

<p>Hover the field to see the tooltip.</p>

</body>
</html>
Try The Code

jQuery UI & Tooltips: Custom animations

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

jQuery UI Tooltip – Custom animation demo

This demo shows how to customize animations using the show and hide options, as well as the open event.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Custom animation demo</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#show-option').tooltip({
                show: {
                    effect: 'slideDown',
                    delay: 250
                }
            });
            $('#hide-option').tooltip({
                hide: {
                    effect: 'explode',
                    delay: 250
                }
            });
            $('#open-event').tooltip({
                show: null,
                position: {
                    my: 'left top',
                    at: 'left bottom'
                },
                open: function (event, ui) {
                    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, 'fast');
                }
            });
        });
    </script>
</head>
<body>

<p>There are various ways to customize the animation of a tooltip.</p>

<p>You can use the <a id='show-option' href='http://jqueryui.com/demos/tooltip/#option-show' title='slide down on show'>show</a>
    and
    <a id='hide-option' href='http://jqueryui.com/demos/tooltip/#option-hide' title='explode on hide'>hide</a> options.
</p>

<p>You can also use the <a id='open-event' href='http://jqueryui.com/demos/tooltip/#event-open'
                           title='move down on show'>open event</a>.</p>

</body>
</html>
Try The Code

jQuery UI & Tooltips: Custom content

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

jQuery UI Tooltip – Custom content

Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Custom content</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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .photo {
            width: 300px;
            text-align: center;
        }

        .photo .ui-widget-header {
            margin: 1em 0;
        }

        .map {
            width: 350px;
            height: 350px;
        }

        .ui-tooltip {
            max-width: 350px;
        }
    </style>
    <script>
        $(function () {
            $(document).tooltip({
                items: 'img, [data-geo], [title]',
                content: function () {
                    var element = $(this);
                    if (element.is('[data-geo]')) {
                        var text = element.text();
                        return "<img class='map' alt='" + text +
                                "' src='http://maps.google.com/maps/api/staticmap?" +
                                "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                                text + "'>";
                    }
                    if (element.is('[title]')) {
                        return element.attr('title');
                    }
                    if (element.is('img')) {
                        return element.attr('alt');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div class='ui-widget photo'>
    <div class='ui-widget-header ui-corner-all'>
        <h2>St. Stephens Cathedral</h2>

        <h3><a href='http://maps.google.com/maps?q=vienna,+austria&amp;z=11' data-geo=''>Vienna, Austria</a></h3>
    </div>
    <a href='http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG'>
        <img src='http://jqueryui.com/resources/demos/tooltip/images/st-stephens.jpg' alt='St. Stephen's Cathedral' class='ui-corner-all'>
    </a>
</div>

<div class='ui-widget photo'>
    <div class='ui-widget-header ui-corner-all'>
        <h2>Tower Bridge</h2>

        <h3><a href='http://maps.google.com/maps?q=london,+england&amp;z=11' data-geo=''>London, England</a></h3>
    </div>
    <a href='http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg'>
        <img src='http://jqueryui.com/resources/demos/tooltip/images/tower-bridge.jpg' alt='Tower Bridge' class='ui-corner-all'>
    </a>
</div>

<p>All images are part of <a href='http://commons.wikimedia.org/wiki/Main_Page'>Wikimedia Commons</a>
    and are licensed under <a href='http://creativecommons.org/licenses/by-sa/3.0/deed.en'
                              title='Creative Commons Attribution-ShareAlike 3.0'>CC BY-SA 3.0</a> by the copyright
    holder.</p>

</body>
</html>
Try The Code

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'>
<head>
    <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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        label {
            display: inline-block;
            width: 5em;
        }

        fieldset div {
            margin-bottom: 2em;
        }

        fieldset .help {
            display: inline-block;
        }

        .ui-tooltip {
            width: 210px;
        }
    </style>
    <script>
        $(function () {
            var tooltips = $('[title]').tooltip();
            $('<button>')
                    .text('Show help')
                    .button()
                    .click(function () {
                        tooltips.tooltip('open');
                    })
                    .insertAfter('form');
        });
    </script>
</head>
<body>

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

</body>
</html>
Try The Code