-
Notifications
You must be signed in to change notification settings - Fork 638
/
tooltip.ts
111 lines (99 loc) · 3.07 KB
/
tooltip.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
import { Tooltip as BootstrapTooltip } from 'bootstrap';
import DocumentService from '@typo3/core/document-service';
/**
* The main tooltip object
*
* Hint: Due to the current usage of tooltips, this class can't be static right now
*
* @deprecated bootstrap tooltip has been deprecated since TYPO3 v12 and will be removed with v13.
*/
class Tooltip {
constructor() {
DocumentService.ready().then((): void => {
console.warn('Tooltip has been deprecated since TYPO3 v12 and will be removed with v13. Rely on browser title instead.');
this.initialize('[data-bs-toggle="tooltip"]');
});
}
private static applyAttributes(attributes: Record<string, string>, node: HTMLElement): void {
for (const [attribute, value] of Object.entries(attributes)) {
node.setAttribute(attribute, value);
}
}
public initialize(selector: string, options: Partial<BootstrapTooltip.Options> = {}): void {
if (Object.entries(options).length === 0) {
options = {
container: 'body',
trigger: 'hover',
delay: {
show: 500,
hide: 100
}
};
}
const elements = document.querySelectorAll(selector);
for (const element of elements) {
// Ensure elements are not initialized multiple times.
BootstrapTooltip.getOrCreateInstance(element, options);
}
}
/**
* Show tooltip on element(s)
*
* @param {NodeListOf<HTMLElement>|HTMLElement} elements
* @param {String} title
*/
public show(elements: NodeListOf<HTMLElement> | HTMLElement, title: string): void {
const attributes = {
'data-bs-placement': 'auto',
title: title
};
if (elements instanceof NodeList) {
for (const node of elements) {
Tooltip.applyAttributes(attributes, node);
BootstrapTooltip.getInstance(node).show();
}
return;
}
if (elements instanceof HTMLElement) {
Tooltip.applyAttributes(attributes, elements);
BootstrapTooltip.getInstance(elements).show();
return;
}
}
/**
* Hide tooltip on element(s)
*
* @param {NodeListOf<HTMLElement>|HTMLElement} elements
*/
public hide(elements: NodeListOf<HTMLElement> | HTMLElement): void {
if (elements instanceof NodeList) {
for (const node of elements) {
const instance = BootstrapTooltip.getInstance(node);
if (instance !== null) {
instance.hide();
}
}
return;
}
if (elements instanceof HTMLElement) {
BootstrapTooltip.getInstance(elements).hide();
return;
}
}
}
const tooltipObject = new Tooltip();
// expose as global object
TYPO3.Tooltip = tooltipObject;
export default tooltipObject;