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
|
/**
_onyx.Tooltip_ is a kind of <a href="#onyx.Popup">onyx.Popup</a> that works
with an <a href="#onyx.TooltipDecorator">onyx.TooltipDecorator</a>. It
automatically displays a tooltip when the user hovers over the decorator.
The tooltip is positioned around the decorator where there is available
window space.
{kind: "onyx.TooltipDecorator", components: [
{kind: "onyx.Button", content: "Tooltip"},
{kind: "onyx.Tooltip", content: "I'm a tooltip for a button."}
]}
You may manually display the tooltip by calling its _show_ method.
*/
enyo.kind({
name: "onyx.Tooltip",
kind: "onyx.Popup",
classes: "onyx-tooltip below left-arrow",
autoDismiss: false,
showDelay: 500,
defaultLeft: -6, //default margin-left value
handlers: {
onRequestShowTooltip: "requestShow",
onRequestHideTooltip: "requestHide"
},
requestShow: function() {
this.showJob = setTimeout(enyo.bind(this, "show"), this.showDelay);
return true;
},
cancelShow: function() {
clearTimeout(this.showJob);
},
requestHide: function() {
this.cancelShow();
return this.inherited(arguments);
},
showingChanged: function() {
this.cancelShow();
this.adjustPosition(true);
this.inherited(arguments);
},
applyPosition: function(inRect) {
var s = ""
for (n in inRect) {
s += (n + ":" + inRect[n] + (isNaN(inRect[n]) ? "; " : "px; "));
}
this.addStyles(s);
},
adjustPosition: function(belowActivator) {
if (this.showing && this.hasNode()) {
var b = this.node.getBoundingClientRect();
//when the tooltip bottom goes below the window height move it above the decorator
if (b.top + b.height > window.innerHeight) {
this.addRemoveClass("below", false);
this.addRemoveClass("above", true);
} else {
this.addRemoveClass("above", false);
this.addRemoveClass("below", true);
}
//when the tooltip's right edge is out of the window, align it's right edge with the decorator left edge (approx)
if (b.left + b.width > window.innerWidth){
this.applyPosition({'margin-left': -b.width, bottom: "auto"});
//use the right-arrow
this.addRemoveClass("left-arrow", false);
this.addRemoveClass("right-arrow", true);
}
}
},
resizeHandler: function() {
//reset the tooltip to align it's left edge with the decorator
this.applyPosition({'margin-left': this.defaultLeft, bottom: "auto"});
this.addRemoveClass("left-arrow", true);
this.addRemoveClass("right-arrow", false);
this.adjustPosition(true);
this.inherited(arguments);
}
});
|
