oxjs/source/Ox.UI/js/Window/Tooltip.js
2012-05-31 12:32:54 +02:00

96 lines
2.6 KiB
JavaScript

'use strict';
/*@
Ox.Tooltip <f> Tooltip Object
([options[, self]]) -> <o:Ox.Element> Tooltip Object
options <o> Options object
self <o> shared private variable
@*/
Ox.Tooltip = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
animate: true, // fixme: shouldn't booleans be false by default?
title: ''
})
.options(options || {})
.update({
title: function() {
that.html(self.options.title);
self.options.title === '' && that.detach();
}
})
.addClass('OxTooltip')
.html(self.options.title);
self.options.animate && that.css({
opacity: 0
});
/*@
hide <f> hide tooltip
() -> <o> hide tooltip
@*/
that.hide = function() {
var last = Ox.last(arguments);
if (self.options.title) {
if (self.options.animate) {
that.animate({
opacity: 0
}, 250, function() {
that.detach();
Ox.isFunction(last) && last();
});
} else {
that.detach();
}
}
return that;
};
// can pass event instead of x/y
// fixme: use this in widgets
/*@
show <f> show tooltip
(x, y) -> <o> show tooltip at x,y
(event) -> <o> show tooltip at event.clientX/clientY
@*/
that.show = function(x, y) {
var last = Ox.last(arguments),
left, top, width, height;
if (self.options.title) {
if (Ox.isObject(arguments[0])) {
self.x = arguments[0].clientX;
self.y = arguments[0].clientY;
} else {
self.x = x;
self.y = y
}
$('.OxTooltip').detach(); // fixme: don't use DOM
that.appendTo(Ox.UI.$body);
width = that.width();
height = that.height();
left = Ox.limit(
self.x - Math.round(width / 2), 0, window.innerWidth - width - 8
);
top = self.y > window.innerHeight - height - 16
? self.y - 16 - height
: self.y + 16;
that.css({
left: left + 'px',
top: top + 'px'
});
self.options.animate && that.animate({
opacity: 1
}, 250, function() {
Ox.isFunction(last) && last();
});
}
return that;
};
return that;
};