JavaScript Tooltip

Set the top property of the jqxTooltip. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<input type="button" id="jqxbutton" value="Hover over me to see the tooltip" />

JavaScript

$("#jqxbutton").jqxButton({
      width: 300,
      height: 30,
      theme: 'energyblue'
  });

  $("#jqxbutton").jqxTooltip({
      theme: 'energyblue',
      content: '<div id="jqxgrid">Loading...</div>',
      width: 370,
      height: 370,
      top: 100
  });
  
  var data = generatedata(10);
	var source = {
  localdata: data,
  datafields: [
    {
      name: 'firstname',
      type: 'string'
    }, {
      name: 'available',
      type: 'boolean'
    }, {
      name: 'productname',
      type: 'string'
    }, {
      name: 'date',
      type: 'date'
    }, {
      name: 'quantity',
      type: 'number'
    }],
  datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
	theme: 'energyblue',
  width: 350,
  source: dataAdapter,
  autoheight: true,
  selectionmode: 'multiplecellsextended',
  columns: [
    { text: 'Name', datafield: 'firstname', width: 67 },
    { text: 'Product', datafield: 'productname' },
    { text: 'Available', datafield: 'available', columntype: 'checkbox' },
    { text: 'Ship Date', datafield: 'date', cellsformat: 'd' },
    { text: 'Qty.', datafield: 'quantity', cellsalign: 'right' }
  ]
});