jQWidgets Tooltip Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.black.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}
.jqx-widget-error-tooltip {
    font-family: Verdana;
}
.jqx-widget-content-error-tooltip {
    color: #222222;
    text-shadow: none;
    border-color: #aaaaaa;
    background: #ffffff;
    font-family: Verdana;
}
.jqx-widget-header-error-tooltip {
    color: #222222;
    text-shadow: none;
    border-color: #aaaaaa;
    background-color: #efefef;
    background-image: -moz-linear-gradient(top, #efefef, #efefef);
    background-image: -ms-linear-gradient(top, #efefef, #efefef);
    background-image: -o-linear-gradient(top, #efefef, #efefef);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#efefef), to(#efefef));
    background-image: -webkit-linear-gradient(top, #efefef, #efefef);
    background-image: linear-gradient(top, #efefef, #efefef);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    font-family: Verdana;
}
.jqx-grid-cell-error-tooltip, .jqx-widget-error-tooltip .jqx-grid-cell-error-tooltip {
    background-color: #ffffff;
    color: #222222;
    text-shadow: none;
}
.jqx-fill-state-normal-error-tooltip {
    color: #222222;
    text-shadow: none;
    border-color: #aaaaaa;
    background-color: #efefef;
    background-image: -moz-linear-gradient(top, #efefef, #efefef);
    background-image: -ms-linear-gradient(top, #efefef, #efefef);
    background-image: -o-linear-gradient(top, #efefef, #efefef);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#efefef), to(#efefef));
    background-image: -webkit-linear-gradient(top, #efefef, #efefef);
    background-image: linear-gradient(top, #efefef, #efefef);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    font-family: Verdana;
}
.jqx-button-error-tooltip {
    color: #222222;
   ...

JavaScript

$('#myApp').append('<div id="tooltipParent" style="background-color:white;margin:10px">Hover Me</div>');

$("#tooltipParent").jqxTooltip({
    autoHide: false,
    theme: 'Shinyblack',
    name: 'test',
    content: 'Test Test Test'
});

$("#tooltipParent").mouseleave(function () {
    $("#tooltipParent").jqxTooltip('close');
});