primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 20.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/dom')) :
typeof define === 'function' && define.amd ? define('primeng/tooltip', ['exports', '@angular/core', '@angular/common', 'primeng/dom'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.primeng = global.primeng || {}, global.primeng.tooltip = {}), global.ng.core, global.ng.common, global.primeng.dom));
}(this, (function (exports, i0, common, dom) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var Tooltip = /** @class */ (function () {
function Tooltip(el, zone) {
this.el = el;
this.zone = zone;
this.tooltipPosition = 'right';
this.tooltipEvent = 'hover';
this.appendTo = 'body';
this.tooltipZIndex = 'auto';
this.escape = true;
}
Object.defineProperty(Tooltip.prototype, "disabled", {
get: function () {
return this._disabled;
},
set: function (val) {
this._disabled = val;
this.deactivate();
},
enumerable: false,
configurable: true
});
Tooltip.prototype.ngAfterViewInit = function () {
var _this = this;
this.zone.runOutsideAngular(function () {
if (_this.tooltipEvent === 'hover') {
_this.mouseEnterListener = _this.onMouseEnter.bind(_this);
_this.mouseLeaveListener = _this.onMouseLeave.bind(_this);
_this.clickListener = _this.onClick.bind(_this);
_this.el.nativeElement.addEventListener('mouseenter', _this.mouseEnterListener);
_this.el.nativeElement.addEventListener('mouseleave', _this.mouseLeaveListener);
_this.el.nativeElement.addEventListener('click', _this.clickListener);
}
else if (_this.tooltipEvent === 'focus') {
_this.focusListener = _this.onFocus.bind(_this);
_this.blurListener = _this.onBlur.bind(_this);
_this.el.nativeElement.addEventListener('focus', _this.focusListener);
_this.el.nativeElement.addEventListener('blur', _this.blurListener);
}
});
};
Tooltip.prototype.onMouseEnter = function (e) {
if (!this.container && !this.showTimeout) {
this.activate();
}
};
Tooltip.prototype.onMouseLeave = function (e) {
this.deactivate();
};
Tooltip.prototype.onFocus = function (e) {
this.activate();
};
Tooltip.prototype.onBlur = function (e) {
this.deactivate();
};
Tooltip.prototype.onClick = function (e) {
this.deactivate();
};
Tooltip.prototype.activate = function () {
var _this = this;
this.active = true;
this.clearHideTimeout();
if (this.showDelay)
this.showTimeout = setTimeout(function () { _this.show(); }, this.showDelay);
else
this.show();
if (this.life) {
var duration = this.showDelay ? this.life + this.showDelay : this.life;
this.hideTimeout = setTimeout(function () { _this.hide(); }, duration);
}
};
Tooltip.prototype.deactivate = function () {
var _this = this;
this.active = false;
this.clearShowTimeout();
if (this.hideDelay) {
this.clearHideTimeout(); //life timeout
this.hideTimeout = setTimeout(function () { _this.hide(); }, this.hideDelay);
}
else {
this.hide();
}
};
Object.defineProperty(Tooltip.prototype, "text", {
get: function () {
return this._text;
},
set: function (text) {
this._text = text;
if (this.active) {
if (this._text) {
if (this.container && this.container.offsetParent) {
this.updateText();
this.align();
}
else {
this.show();
}
}
else {
this.hide();
}
}
},
enumerable: false,
configurable: true
});
Tooltip.prototype.create = function () {
if (this.container) {
this.clearHideTimeout();
this.remove();
}
this.container = document.createElement('div');
var tooltipArrow = document.createElement('div');
tooltipArrow.className = 'p-tooltip-arrow';
this.container.appendChild(tooltipArrow);
this.tooltipText = document.createElement('div');
this.tooltipText.className = 'p-tooltip-text';
this.updateText();
if (this.positionStyle) {
this.container.style.position = this.positionStyle;
}
this.container.appendChild(this.tooltipText);
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else if (this.appendTo === 'target')
dom.DomHandler.appendChild(this.container, this.el.nativeElement);
else
dom.DomHandler.appendChild(this.container, this.appendTo);
this.container.style.display = 'inline-block';
};
Tooltip.prototype.show = function () {
if (!this.text || this.disabled) {
return;
}
this.create();
this.align();
dom.DomHandler.fadeIn(this.container, 250);
if (this.tooltipZIndex === 'auto')
this.container.style.zIndex = ++dom.DomHandler.zindex;
else
this.container.style.zIndex = this.tooltipZIndex;
this.bindDocumentResizeListener();
this.bindScrollListener();
};
Tooltip.prototype.hide = function () {
this.remove();
};
Tooltip.prototype.updateText = function () {
if (this.escape) {
this.tooltipText.innerHTML = '';
this.tooltipText.appendChild(document.createTextNode(this._text));
}
else {
this.tooltipText.innerHTML = this._text;
}
};
Tooltip.prototype.align = function () {
var position = this.tooltipPosition;
switch (position) {
case 'top':
this.alignTop();
if (this.isOutOfBounds()) {
this.alignBottom();
if (this.isOutOfBounds()) {
this.alignRight();
if (this.isOutOfBounds()) {
this.alignLeft();
}
}
}
break;
case 'bottom':
this.alignBottom();
if (this.isOutOfBounds()) {
this.alignTop();
if (this.isOutOfBounds()) {
this.alignRight();
if (this.isOutOfBounds()) {
this.alignLeft();
}
}
}
break;
case 'left':
this.alignLeft();
if (this.isOutOfBounds()) {
this.alignRight();
if (this.isOutOfBounds()) {
this.alignTop();
if (this.isOutOfBounds()) {
this.alignBottom();
}
}
}
break;
case 'right':
this.alignRight();
if (this.isOutOfBounds()) {
this.alignLeft();
if (this.isOutOfBounds()) {
this.alignTop();
if (this.isOutOfBounds()) {
this.alignBottom();
}
}
}
break;
}
};
Tooltip.prototype.getHostOffset = function () {
if (this.appendTo === 'body' || this.appendTo === 'target') {
var offset = this.el.nativeElement.getBoundingClientRect();
var targetLeft = offset.left + dom.DomHandler.getWindowScrollLeft();
var targetTop = offset.top + dom.DomHandler.getWindowScrollTop();
return { left: targetLeft, top: targetTop };
}
else {
return { left: 0, top: 0 };
}
};
Tooltip.prototype.alignRight = function () {
this.preAlign('right');
var hostOffset = this.getHostOffset();
var left = hostOffset.left + dom.DomHandler.getOuterWidth(this.el.nativeElement);
var top = hostOffset.top + (dom.DomHandler.getOuterHeight(this.el.nativeElement) - dom.DomHandler.getOuterHeight(this.container)) / 2;
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
};
Tooltip.prototype.alignLeft = function () {
this.preAlign('left');
var hostOffset = this.getHostOffset();
var left = hostOffset.left - dom.DomHandler.getOuterWidth(this.container);
var top = hostOffset.top + (dom.DomHandler.getOuterHeight(this.el.nativeElement) - dom.DomHandler.getOuterHeight(this.container)) / 2;
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
};
Tooltip.prototype.alignTop = function () {
this.preAlign('top');
var hostOffset = this.getHostOffset();
var left = hostOffset.left + (dom.DomHandler.getOuterWidth(this.el.nativeElement) - dom.DomHandler.getOuterWidth(this.container)) / 2;
var top = hostOffset.top - dom.DomHandler.getOuterHeight(this.container);
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
};
Tooltip.prototype.alignBottom = function () {
this.preAlign('bottom');
var hostOffset = this.getHostOffset();
var left = hostOffset.left + (dom.DomHandler.getOuterWidth(this.el.nativeElement) - dom.DomHandler.getOuterWidth(this.container)) / 2;
var top = hostOffset.top + dom.DomHandler.getOuterHeight(this.el.nativeElement);
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
};
Tooltip.prototype.preAlign = function (position) {
this.container.style.left = -999 + 'px';
this.container.style.top = -999 + 'px';
var defaultClassName = 'p-tooltip p-component p-tooltip-' + position;
this.container.className = this.tooltipStyleClass ? defaultClassName + ' ' + this.tooltipStyleClass : defaultClassName;
};
Tooltip.prototype.isOutOfBounds = function () {
var offset = this.container.getBoundingClientRect();
var targetTop = offset.top;
var targetLeft = offset.left;
var width = dom.DomHandler.getOuterWidth(this.container);
var height = dom.DomHandler.getOuterHeight(this.container);
var viewport = dom.DomHandler.getViewport();
return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
};
Tooltip.prototype.onWindowResize = function (e) {
this.hide();
};
Tooltip.prototype.bindDocumentResizeListener = function () {
var _this = this;
this.zone.runOutsideAngular(function () {
_this.resizeListener = _this.onWindowResize.bind(_this);
window.addEventListener('resize', _this.resizeListener);
});
};
Tooltip.prototype.unbindDocumentResizeListener = function () {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
};
Tooltip.prototype.bindScrollListener = function () {
var _this = this;
if (!this.scrollHandler) {
this.scrollHandler = new dom.ConnectedOverlayScrollHandler(this.el.nativeElement, function () {
if (_this.container) {
_this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
};
Tooltip.prototype.unbindScrollListener = function () {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
};
Tooltip.prototype.unbindEvents = function () {
if (this.tooltipEvent === 'hover') {
this.el.nativeElement.removeEventListener('mouseenter', this.mouseEnterListener);
this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListener);
this.el.nativeElement.removeEventListener('click', this.clickListener);
}
else if (this.tooltipEvent === 'focus') {
this.el.nativeElement.removeEventListener('focus', this.focusListener);
this.el.nativeElement.removeEventListener('blur', this.blurListener);
}
this.unbindDocumentResizeListener();
};
Tooltip.prototype.remove = function () {
if (this.container && this.container.parentElement) {
if (this.appendTo === 'body')
document.body.removeChild(this.container);
else if (this.appendTo === 'target')
this.el.nativeElement.removeChild(this.container);
else
dom.DomHandler.removeChild(this.container, this.appendTo);
}
this.unbindDocumentResizeListener();
this.unbindScrollListener();
this.clearTimeouts();
this.container = null;
this.scrollHandler = null;
};
Tooltip.prototype.clearShowTimeout = function () {
if (this.showTimeout) {
clearTimeout(this.showTimeout);
this.showTimeout = null;
}
};
Tooltip.prototype.clearHideTimeout = function () {
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = null;
}
};
Tooltip.prototype.clearTimeouts = function () {
this.clearShowTimeout();
this.clearHideTimeout();
};
Tooltip.prototype.ngOnDestroy = function () {
this.unbindEvents();
this.remove();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
};
return Tooltip;
}());
Tooltip.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: Tooltip, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
Tooltip.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.4", type: Tooltip, selector: "[pTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: "escape", showDelay: "showDelay", hideDelay: "hideDelay", life: "life", disabled: ["tooltipDisabled", "disabled"], text: ["pTooltip", "text"] }, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: Tooltip, decorators: [{
type: i0.Directive,
args: [{
selector: '[pTooltip]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { tooltipPosition: [{
type: i0.Input
}], tooltipEvent: [{
type: i0.Input
}], appendTo: [{
type: i0.Input
}], positionStyle: [{
type: i0.Input
}], tooltipStyleClass: [{
type: i0.Input
}], tooltipZIndex: [{
type: i0.Input
}], escape: [{
type: i0.Input
}], showDelay: [{
type: i0.Input
}], hideDelay: [{
type: i0.Input
}], life: [{
type: i0.Input
}], disabled: [{
type: i0.Input,
args: ["tooltipDisabled"]
}], text: [{
type: i0.Input,
args: ['pTooltip']
}] } });
var TooltipModule = /** @class */ (function () {
function TooltipModule() {
}
return TooltipModule;
}());
TooltipModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: TooltipModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
TooltipModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: TooltipModule, declarations: [Tooltip], imports: [common.CommonModule], exports: [Tooltip] });
TooltipModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: TooltipModule, imports: [[common.CommonModule]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0__namespace, type: TooltipModule, decorators: [{
type: i0.NgModule,
args: [{
imports: [common.CommonModule],
exports: [Tooltip],
declarations: [Tooltip]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.Tooltip = Tooltip;
exports.TooltipModule = TooltipModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=primeng-tooltip.umd.js.map