Theming Tooltip Box Shadows

The jQuery UI tooltip uses the box-shadow CSS property, but the color isn't part of the theme. We can fix that by sampling the border color.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/humanity/jquery-ui.css">
<div class="ui-widget">
    <label for="age">Your age:</label>
    <input id="age" title="We ask for your age only for statistical purposes." />
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

$( "#age" ).tooltip({
    
    // Triggered after the tooltip element is displayed.
    open: function( e, ui ) {
        
        // Use the _find() method to get the tooltip element.
        var $tt = $( this ).data( "ui-tooltip" )
                ._find( $( this ) ),
            
            // Sample the "border-color" and "box-shadow" CSS properties.
            color = $tt.css( "border-color" ),
            //shadow = $tt.css( "box-shadow" ),
            
            // The regular expression used to replace the box-shadow
            // color proerty value.
            regexp = /^rgb\(.*\)/;
        
        // Update the tooltip CSS by replacing the box-shadow property
        // with the border-color property value.
        $tt.css({
            "box-shadow": shadow.replace( regexp, color )
        });
        
    }
});