<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<tooltip id="treeTooltip" noautohide="true" onpopupshowing="return showTreeTooltip(event)"/>
	<tree id="tree1" flex="1" hidecolumnpicker="true" seltype="single" >
		<treecols>
			<treecol id="name1"  flex="1" label="Name" />
			<treecol id="sex1"   flex="1" label="Sex" />
			<treecol id="color1" flex="1" label="Color" />
			<treecol id="attr1"  flex="1" label="Attribute" />
		</treecols>
		<treechildren tooltip="treeTooltip">
			<treeitem>
				<treerow mytooltip="Pear row tooltip">
					<treecell label="Pearl" />
					<treecell label="Female" />
					<treecell label="Gray" />
					<treecell label="Frumpy" />
				</treerow>
			</treeitem>
			<treeitem>
				<treerow mytooltip="Aramis row tooltip">
					<treecell label="Aramis" />
					<treecell label="Male" />
	 				<treecell label="Black" />
					<treecell label="Cute" />
				</treerow>
			</treeitem>
			<treeitem>
				<treerow mytooltip="Yakima row tooltip">
					<treecell label="Yakima" />
					<treecell label="Male" />
					<treecell label="Holstein" />
					<treecell label="Handsome" />
				</treerow>
			</treeitem>
		</treechildren>
	</tree>
<script type="text/javascript">
<![CDATA[
function showTreeTooltip(event) {
    try {
	let col = {};
	let row = {}; 
	let childElement = {};
	var tree1 = document.getElementById('tree1');
	var treeTooltip = document.getElementById('treeTooltip'); 
	tree1.boxObject.getCellAt(event.clientX, event.clientY, row, col, childElement);
	if (row.value>-1) {
	  var treecell1 = tree1.view.getItemAtIndex(row.value).firstChild;
	  treeTooltip.setAttribute('label',treecell1.getAttribute('mytooltip')+'\nX: '+event.clientX+'\nY: '+event.clientY+'\nrow: '+row.value+'\ncol: '+col.value.id); 
	  return true;
	  } else {
	  return false;
	  }
	}
    catch (e) {
	//alert(e.message);
  	return false;
    }
}   
]]>
</script>
</window>