101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
|
/**
|
||
|
|
@license
|
||
|
|
Copyright (c) 2022 trading_peter
|
||
|
|
This program is available under Apache License Version 2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
import './tp-tooltip.js';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Elements implementing this mixin are able to show tooltip on mouse over.
|
||
|
|
*
|
||
|
|
* ## Example
|
||
|
|
* ```html
|
||
|
|
* <x-foo tooltip="Show this text in the tooltip"></x-foo>
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @polymer
|
||
|
|
* @mixinFunction
|
||
|
|
*/
|
||
|
|
export const Tooltip = function(superClass) {
|
||
|
|
return class extends superClass {
|
||
|
|
static get properties() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Text to show in the tooltip.
|
||
|
|
*/
|
||
|
|
tooltip: { type: String },
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Vertical align of the tooltip.
|
||
|
|
* Supported are `bottom` and `top`.
|
||
|
|
*/
|
||
|
|
tooltipValign: { type: String }
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.tooltipValign = 'bottom';
|
||
|
|
this._showTooltip = this._showTooltip.bind(this);
|
||
|
|
this._hideTooltip = this._hideTooltip.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
set tooltip(val) {
|
||
|
|
const oldTooltip = this.tooltip;
|
||
|
|
this._tooltip = val;
|
||
|
|
this._tooltipChanged(this.tooltip, oldTooltip);
|
||
|
|
}
|
||
|
|
|
||
|
|
get tooltip() {
|
||
|
|
return this._tooltip;
|
||
|
|
}
|
||
|
|
|
||
|
|
_tooltipChanged(newTooltip, oldTooltip) {
|
||
|
|
if (oldTooltip) {
|
||
|
|
this.removeEventListener('mouseenter', this._showTooltip);
|
||
|
|
this.removeEventListener('focus', this._showTooltip);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (newTooltip && newTooltip !== '') {
|
||
|
|
this.addEventListener('mouseenter', this._showTooltip);
|
||
|
|
this.addEventListener('focus', this._showTooltip);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_showTooltip() {
|
||
|
|
if (this._tooltipInstance || !this.tooltip || this.tooltip === '') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const tooltip = document.createElement('tp-tooltip');
|
||
|
|
tooltip.innerHTML = this.tooltip;
|
||
|
|
tooltip.valign = this.tooltipValign;
|
||
|
|
tooltip.target = this;
|
||
|
|
this._tooltipInstance = tooltip;
|
||
|
|
|
||
|
|
this.addEventListener('mouseleave', this._hideTooltip);
|
||
|
|
this.addEventListener('blur', this._hideTooltip);
|
||
|
|
this.addEventListener('click', this._hideTooltip);
|
||
|
|
|
||
|
|
document.body.appendChild(this._tooltipInstance);
|
||
|
|
this._tooltipInstance.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
_hideTooltip() {
|
||
|
|
if (!this._tooltipInstance) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._tooltipInstance.hide(function() {
|
||
|
|
if (this._tooltipInstance) {
|
||
|
|
document.body.removeChild(this._tooltipInstance);
|
||
|
|
this.removeEventListener('mouseleave', this._hideTooltip);
|
||
|
|
this.removeEventListener('blur', this._hideTooltip);
|
||
|
|
this.removeEventListener('click', this._hideTooltip);
|
||
|
|
this._tooltipInstance = null;
|
||
|
|
}
|
||
|
|
}.bind(this));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|