| 6 | |
| 7 | DOM.defineCustomElement( |
| 8 | 'view/tool-tip', (templateText) => class Tooltip extends V8CustomElement { |
| 9 | _targetNode; |
| 10 | _content; |
| 11 | _isHidden = true; |
| 12 | _debouncedSetData = |
| 13 | new Debouncer((...args) => this._setData(...args), 500) |
| 14 | |
| 15 | constructor() { |
| 16 | super(templateText); |
| 17 | this._intersectionObserver = new IntersectionObserver((entries) => { |
| 18 | if (entries[0].intersectionRatio <= 0) { |
| 19 | this.hide(); |
| 20 | } else { |
| 21 | this.show(); |
| 22 | this.requestUpdate(true); |
| 23 | } |
| 24 | }); |
| 25 | document.addEventListener('click', (event) => { |
| 26 | // Only hide the tooltip if we click anywhere outside of it. |
| 27 | let target = event.target; |
| 28 | while (target) { |
| 29 | if (target == this) return; |
| 30 | target = target.parentNode; |
| 31 | } |
| 32 | this.hide() |
| 33 | }); |
| 34 | } |
| 35 | |
| 36 | _update() { |
| 37 | if (!this._targetNode || this._isHidden) return; |
| 38 | if (!this._targetNode.parentNode) return; |
| 39 | const rect = this._targetNode.getBoundingClientRect(); |
| 40 | rect.x += rect.width / 2; |
| 41 | let atRight = this._useRight(rect.x); |
| 42 | let atBottom = this._useBottom(rect.y); |
| 43 | if (atBottom) rect.y += rect.height; |
| 44 | this._setPosition(rect, atRight, atBottom); |
| 45 | this.requestUpdate(true); |
| 46 | } |
| 47 | |
| 48 | set data({content, positionOrTargetNode, immediate}) { |
| 49 | if (immediate) { |
| 50 | this._debouncedSetData.callNow(content, positionOrTargetNode) |
| 51 | } else { |
| 52 | this._debouncedSetData.call(content, positionOrTargetNode) |
| 53 | } |
| 54 | } |
| 55 | |
| 56 | _setData(content, positionOrTargetNode) { |
| 57 | if (positionOrTargetNode.nodeType === undefined) { |
| 58 | this._targetNode = undefined; |
| 59 | const position = positionOrTargetNode; |
| 60 | this._setPosition( |
| 61 | position, this._useRight(position.x), |
| 62 | this._useBottom(position.y)); |
| 63 | } else { |
| 64 | this._setTargetNode(positionOrTargetNode); |
| 65 | } |