I have a treemap wich is updated dynamically according to user
selection in two combo boxes above the treemap, one for the color
category and the other for the area. When the selection is changed in
the combo boxes, the treemap is rebuilt via AJAX with new JSON data,
calling: tm = new TM.Squarified(...) and tm.loadJSON(json).
The problem with the tooltips is that, if the user moves the mouse
above the treemap quickly after changing the selection and before the
treemap gets updated, the old tooltip gets frozen over the treemap and
a new one is created to follow the mouse events.
This problem doesn't occur with old versions of JIT that used mootools
to render the tooltips.
Searching in the code, I found that a tooltip is always created and
appended to the document body if instructed by config.Tips.allow in
line 7405 of jit.js.
It seems that the tooltip does not get destroyed at the end of the
life-cicle of the Treemap object. The best approach would be somehow
destroy the tooltip appropriately, but I could came only with a quick
fix for that:
Line 7405 of jit.js
Original:
if(this.config.Tips.allow && document.body ) {
var tip = document.createElement('div');
tip.id = '_tooltip';
tip.className = 'tip';
var style = tip.style;
style.position = 'absolute';
style.display = 'none';
style.zIndex = 13000;
document.body.appendChild(tip);
this.tip = tip;
}
Modified:
var exists = document.getElementById('_tooltip');
if ( exists )
this.tip = exists;
else if(this.config.Tips.allow && document.body ) {
var tip = document.createElement('div');
tip.id = '_tooltip';
tip.className = 'tip';
var style = tip.style;
style.position = 'absolute';
style.display = 'none';
style.zIndex = 13000;
document.body.appendChild(tip);
this.tip = tip;
}
This approach reuses the existent tooltip if it already exists.
philogb
commented
15 years ago
I have a treemap wich is updated dynamically according to user selection in two combo boxes above the treemap, one for the color category and the other for the area. When the selection is changed in the combo boxes, the treemap is rebuilt via AJAX with new JSON data, calling: tm = new TM.Squarified(...) and tm.loadJSON(json). The problem with the tooltips is that, if the user moves the mouse above the treemap quickly after changing the selection and before the treemap gets updated, the old tooltip gets frozen over the treemap and a new one is created to follow the mouse events. This problem doesn't occur with old versions of JIT that used mootools to render the tooltips. Searching in the code, I found that a tooltip is always created and appended to the document body if instructed by config.Tips.allow in line 7405 of jit.js. It seems that the tooltip does not get destroyed at the end of the life-cicle of the Treemap object. The best approach would be somehow destroy the tooltip appropriately, but I could came only with a quick fix for that: Line 7405 of jit.js Original: if(this.config.Tips.allow && document.body ) { var tip = document.createElement('div'); tip.id = '_tooltip'; tip.className = 'tip'; var style = tip.style; style.position = 'absolute'; style.display = 'none'; style.zIndex = 13000; document.body.appendChild(tip); this.tip = tip; }
Modified: var exists = document.getElementById('_tooltip'); if ( exists ) this.tip = exists; else if(this.config.Tips.allow && document.body ) { var tip = document.createElement('div'); tip.id = '_tooltip'; tip.className = 'tip'; var style = tip.style; style.position = 'absolute'; style.display = 'none'; style.zIndex = 13000; document.body.appendChild(tip); this.tip = tip; }
This approach reuses the existent tooltip if it already exists.