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'>
    <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'>
        $(function () {
                position: {
                    my: 'center bottom-20',
                    at: 'center top',
                    using: function (position, feedback) {
        .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;

<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>

Try The Code
Series Navigation<< jQuery UI & Tooltips: Basic tooltips
jQuery UI & Tooltips: Custom animations >>