|
598
|
1 |
/* this widget displays a small tooltip */ |
|
|
2 |
IriSP.Widgets.Tooltip = function(Popcorn, config, Serializer) { |
|
|
3 |
IriSP.Widgets.Widget.call(this, Popcorn, config, Serializer); |
|
|
4 |
}; |
|
|
5 |
|
|
|
6 |
IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget(); |
|
|
7 |
|
|
|
8 |
IriSP.Widgets.Tooltip.prototype.template = '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Color"></div><div class="Ldt-Tooltip-Text"></div></div>'; |
|
|
9 |
|
|
|
10 |
IriSP.Widgets.Tooltip.prototype.draw = function() { |
|
|
11 |
_this = this; |
|
|
12 |
this.$.html(this.template); |
|
|
13 |
this.$.parent().css({ |
|
|
14 |
"position" : "relative" |
|
|
15 |
}); |
|
|
16 |
this.$tip = this.$.find(".Ldt-Tooltip"); |
|
|
17 |
this.$.mouseover(function() { |
|
|
18 |
_this.$tip.hide(); |
|
|
19 |
}); |
|
|
20 |
this.hide(); |
|
|
21 |
}; |
|
|
22 |
|
|
|
23 |
IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) { |
|
|
24 |
|
|
|
25 |
if (typeof color !== "undefined") { |
|
|
26 |
this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color); |
|
|
27 |
} else { |
|
|
28 |
this.$.find(".Ldt-Tooltip-Color").hide(); |
|
|
29 |
} |
|
|
30 |
|
|
|
31 |
this.$.find(".Ldt-Tooltip-Text").html(text); |
|
|
32 |
|
|
|
33 |
this.$tip.show(); |
|
|
34 |
this.$tip.css({ |
|
|
35 |
"left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px", |
|
|
36 |
"top" : Math.floor(y - this.$tip.outerHeight()) + "px" |
|
|
37 |
}); |
|
|
38 |
}; |
|
|
39 |
|
|
|
40 |
IriSP.Widgets.Tooltip.prototype.hide = function() { |
|
|
41 |
this.$tip.hide(); |
|
|
42 |
}; |