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 style="background-color:white;margin:10px" id="tooltipParent1">Tooltip Parent 1</div>');
$('#myApp').append('<div style="background-color:white;margin:10px" id="tooltipParent2">Tooltip Parent 2</div>');

$('#myApp').append('<button id="open" style="margin:10px">open tooltip 1</button>');
$('#myApp').append('<button id="close" style="margin:10px">close tooltip 1</button>');

$("#tooltipParent1").jqxTooltip({
    autoHide : false,
    opacity : 1,
    trigger : 'none',
    theme : 'error-tooltip'
});
$("#tooltipParent2").jqxTooltip({
    autoHide : false,
    opacity : 1,
    trigger : 'none',
    theme : 'error-tooltip'
});

$("#tooltipParent1").jqxTooltip('content', 'Test Test Test');
$("#tooltipParent1").jqxTooltip('open');

$("#tooltipParent2").jqxTooltip('content', 'Test Tooltip 2');
$("#tooltipParent2").jqxTooltip('open');

$("#open").on('click', function(event){
    $("#tooltipParent1").jqxTooltip('open');
});

$("#close").on('click', function(event){
    $("#tooltipParent1").jqxTooltip('close');
});