Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-08-08 03:08:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

tooltip delay of 500ms

Browse source
This commit is contained in:
Thijs Wenker 2018-10-19 16:32:38 +02:00
parent a3b874f9aa
commit 358b0b76d1
2 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
scripts/system/assets/data/createAppTooltips.json
View file

@ -294,7 +294,7 @@
"tooltip": "The global dimensions of this entity." "tooltip": "The global dimensions of this entity."
}, },
"scale": { "scale": {
"tooltip": "The global scaling of this entity,", "tooltip": "The global scaling of this entity.",
"skipJSProperty": true "skipJSProperty": true
}, },
"registrationPoint": { "registrationPoint": {

76
scripts/system/html/js/createAppTooltip.js
View file

@ -7,17 +7,25 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
const CREATE_APP_TOOLTIP_OFFSET = 20; const CREATE_APP_TOOLTIP_OFFSET = 20;
const TOOLTIP_DELAY = 500; // ms
function CreateAppTooltip() { function CreateAppTooltip() {
this._tooltipData = null; this._tooltipData = null;
this._tooltipDiv = null; this._tooltipDiv = null;
this._delayTimeout = null;
} }
CreateAppTooltip.prototype = { CreateAppTooltip.prototype = {
_tooltipData: null, _tooltipData: null,
_tooltipDiv: null, _tooltipDiv: null,
_delayTimeout: null,
_removeTooltipIfExists: function() { _removeTooltipIfExists: function() {
if (this._delayTimeout !== null) {
window.clearTimeout(this._delayTimeout);
this._delayTimeout = null;
}
if (this._tooltipDiv !== null) { if (this._tooltipDiv !== null) {
this._tooltipDiv.remove(); this._tooltipDiv.remove();
this._tooltipDiv = null; this._tooltipDiv = null;
@ -33,49 +41,51 @@ CreateAppTooltip.prototype = {
this._removeTooltipIfExists(); this._removeTooltipIfExists();
let tooltipData = this._tooltipData[tooltipID]; this._delayTimeout = window.setTimeout(function() {
let tooltipData = this._tooltipData[tooltipID];
if (!tooltipData || tooltipData.tooltip === "") { if (!tooltipData || tooltipData.tooltip === "") {
return; return;
} }
let elementRect = element.getBoundingClientRect(); let elementRect = element.getBoundingClientRect();
let elTip = document.createElement("div"); let elTip = document.createElement("div");
elTip.className = "createAppTooltip"; elTip.className = "createAppTooltip";
let elTipDescription = document.createElement("div"); let elTipDescription = document.createElement("div");
elTipDescription.className = "createAppTooltipDescription"; elTipDescription.className = "createAppTooltipDescription";
elTipDescription.innerText = tooltipData.tooltip; elTipDescription.innerText = tooltipData.tooltip;
elTip.appendChild(elTipDescription); elTip.appendChild(elTipDescription);
let jsAttribute = tooltipID; let jsAttribute = tooltipID;
if (tooltipData.jsPropertyName) { if (tooltipData.jsPropertyName) {
jsAttribute = tooltipData.jsPropertyName; jsAttribute = tooltipData.jsPropertyName;
} }
if (!tooltipData.skipJSProperty) { if (!tooltipData.skipJSProperty) {
let elTipJSAttribute = document.createElement("div"); let elTipJSAttribute = document.createElement("div");
elTipJSAttribute.className = "createAppTooltipJSAttribute"; elTipJSAttribute.className = "createAppTooltipJSAttribute";
elTipJSAttribute.innerText = `JS Attribute: ${jsAttribute}`; elTipJSAttribute.innerText = `JS Attribute: ${jsAttribute}`;
elTip.appendChild(elTipJSAttribute); elTip.appendChild(elTipJSAttribute);
} }
document.body.appendChild(elTip); document.body.appendChild(elTip);
let elementTop = window.pageYOffset + elementRect.top; let elementTop = window.pageYOffset + elementRect.top;
let desiredTooltipTop = elementTop + element.clientHeight + CREATE_APP_TOOLTIP_OFFSET; let desiredTooltipTop = elementTop + element.clientHeight + CREATE_APP_TOOLTIP_OFFSET;
if ((window.innerHeight + window.pageYOffset) < (desiredTooltipTop + elTip.clientHeight)) { if ((window.innerHeight + window.pageYOffset) < (desiredTooltipTop + elTip.clientHeight)) {
// show above when otherwise out of bounds // show above when otherwise out of bounds
elTip.style.top = elementTop - CREATE_APP_TOOLTIP_OFFSET - elTip.clientHeight; elTip.style.top = elementTop - CREATE_APP_TOOLTIP_OFFSET - elTip.clientHeight;
} else { } else {
// show tooltip on below by default // show tooltip on below by default
elTip.style.top = desiredTooltipTop; elTip.style.top = desiredTooltipTop;
} }
elTip.style.left = window.pageXOffset + elementRect.left; elTip.style.left = window.pageXOffset + elementRect.left;
this._tooltipDiv = elTip; this._tooltipDiv = elTip;
}.bind(this), TOOLTIP_DELAY);
}.bind(this), false); }.bind(this), false);
element.addEventListener("mouseout", function() { element.addEventListener("mouseout", function() {
this._removeTooltipIfExists(); this._removeTooltipIfExists();