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
|
(function(F/*fossil object*/){
/**
A very basic tooltip widget.
Requires: fossil.bootstrap, fossil.dom
*/
const D = F.dom;
/**
Creates a new tooltip widget using the given options object.
The options are available to clients after this returns via
theTooltip.options.
Options:
.refresh: required callback which is called whenever the tooltip
is revealed or moved. It must refresh the contents of the
tooltip, if needed, by applying it to this.e, which is the base
DOM element for the tooltip.
.adjustX: an optional callback which is called when the tooltip
is to be displayed at a given position and passed the X
coordinate. This routine must either return its argument as-is
or return an adjusted value. This API assumes that clients give it
viewport-relative coordinates, and it will take care to translate
those to page-relative.
.adjustY: the Y counterpart of adjustX.
.init: optional callback called one time to initialize the
state of the tooltip. This is called after the this.e has
been created and added (initially hidden) to the DOM.
|
|
>
|
|
|
|
|
|
|
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
|
(function(F/*fossil object*/){
/**
A very basic tooltip widget.
Requires: fossil.bootstrap, fossil.dom
*/
const D = F.dom;
/**
Creates a new tooltip widget using the given options object.
The options are available to clients after this returns via
theTooltip.options, and default values for any options not
provided are pulled from TooltipWidget.defaultOptions.
Options:
.refresh: required callback which is called whenever the tooltip
is revealed or moved. It must refresh the contents of the
tooltip, if needed, by applying the content to/within this.e,
which is the base DOM element for the tooltip.
.adjustX: an optional callback which is called when the tooltip
is to be displayed at a given position and passed the X
viewport-relative coordinate. This routine must either return its
argument as-is or return an adjusted value. This API assumes that
clients give it viewport-relative coordinates, and it will take
care to translate those to page-relative.
.adjustY: the Y counterpart of adjustX.
.init: optional callback called one time to initialize the
state of the tooltip. This is called after the this.e has
been created and added (initially hidden) to the DOM.
|
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
|
};
F.TooltipWidget.defaultOptions = {
cssClass: 'fossil-tooltip',
style: {/*properties copied as-is into element.style*/},
adjustX: (x)=>x,
adjustY: (y)=>y,
refresh: function(hw){
console.error("TooltipWidget refresh() option must be provided by the client.");
}
};
F.TooltipWidget.prototype = {
isShown: function(){return !this.e.classList.contains('hidden')},
/** Calls the refresh() method of the options object. */
refresh: function(){this.options.refresh.call(this)},
/**
Usages:
(bool showIt) => hide it or reveal it at its last position.
(x, y) => reveal/move it at/to the given
relative-to-the-viewport position, which will be adjusted to make
it page-relative.
(DOM element) => reveal/move it ad/to a position based on the
the given element (adjusted slightly).
For the latter two, this.options.adjustX() and adjustY() will
be called to adjust it further.
Returns this object.
*/
|
|
|
|
>
|
>
>
>
>
>
|
|
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
112
113
114
115
|
};
F.TooltipWidget.defaultOptions = {
cssClass: 'fossil-tooltip',
style: {/*properties copied as-is into element.style*/},
adjustX: (x)=>x,
adjustY: (y)=>y,
refresh: function(){
console.error("The TooltipWidget refresh() option must be provided by the client.");
}
};
F.TooltipWidget.prototype = {
isShown: function(){return !this.e.classList.contains('hidden')},
/** Calls the refresh() method of the options object and returns
this object. */
refresh: function(){
this.options.refresh.call(this);
return this;
},
/**
Shows or hides the tooltip.
Usages:
(bool showIt) => hide it or reveal it at its last position.
(x, y) => reveal/move it at/to the given
relative-to-the-viewport position, which will be adjusted to make
it page-relative.
(DOM element) => reveal/move it at/to a position based on the
the given element (adjusted slightly).
For the latter two, this.options.adjustX() and adjustY() will
be called to adjust it further.
Returns this object.
*/
|
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
x += window.pageXOffset;
y += window.pageYOffset;
}
D[showIt ? 'removeClass' : 'addClass'](this.e, 'hidden');
if(x || y){
this.e.style.left = x+"px";
this.e.style.top = y+"px";
//console.debug("TooltipWidget.show()", arguments, x, y);
}/*/F.TooltipWidget.prototype*/;
})(window.fossil);
|
<
|
|
137
138
139
140
141
142
143
144
145
146
147
148
149
|
x += window.pageXOffset;
y += window.pageYOffset;
}
D[showIt ? 'removeClass' : 'addClass'](this.e, 'hidden');
if(x || y){
this.e.style.left = x+"px";
this.e.style.top = y+"px";
}
return this;
}
}/*F.TooltipWidget.prototype*/;
})(window.fossil);
|