jQWidgets Tooltip Test

by _stephan_

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;
  text-shadow: none;
  border-color: #aaaaaa;
  background-color: #efefef;
 ...

JavaScript

$('#myApp').append('<div id="tooltipParent">Hover Me</div>');

$("#tooltipParent").jqxTooltip({
    autoHide: false,
    theme: 'error-tooltip',
    content: 'Test Test Test'
});