jQuery UI & Tooltips: Place tooltip near the mouse

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

jQuery UI Tooltip – Track the mouse

Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Track the mouse</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;
        }
    </style>
    <script>
        $(function () {
            $(document).tooltip({
                track: true
            });
        });
    </script>
</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: 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

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: 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 Mobile: Slider tooltip

This entry is part 71 of 73 in the series jQuery Mobile

For a better UI, you can also use slider with a tooltip.

To have the value shown on the slider indicator, we can useĀ data-show-value=’true’.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Slider with tooltip</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='slider1'>Slider with tooltip:</label>
            <input type='range' name='slider1' id='slider1' min='0' max='100' value='50' data-popup-enabled='true'>
            <label for='slider2'>Slider showing value on button:</label>
            <input type='range' name='slider2' id='slider2' min='0' max='100' value='50' data-show-value='true'>
            <label for='slider3'>Both options together:</label>
            <input type='range' name='slider3' id='slider3' min='0' max='100' value='50' data-show-value='true' data-popup-enabled='true'>
            <label for='slider4'>Both options together (mini):</label>
            <input type='range' name='slider4' id='slider4' min='0' max='100' value='50' data-show-value='true' data-popup-enabled='true' data-mini='true'>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code