oxjs/source/Ox.UI/js/Window/Ox.Tooltip.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.Tooltip <f:Ox.Element> Tooltip Object
    () ->              <f> Tooltip Object
    (options) ->       <f> Tooltip Object
    (options, self) -> <f> 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 || {})
            .addClass('OxTooltip')
            .html(self.options.title);

    self.options.animate && that.css({
        opacity: 0
    });

    self.setOption = function(key, value) {
        if (key == 'title') {
            that.html(value);
        }
    };

    that.hide = function() {
        if (self.options.title) {
            if (self.options.animate) {
                that.animate({
                    opacity: 0
                }, 250, function() {
                    that.removeElement();
                });
            } else {
                that.removeElement();
            }
        }
        return that;
    };

    // can pass event instead of x/y
    // fixme: use this in widgets
    that.show = function(x, y) {
        var left, top, width, height;
        if (self.options.title) {
            if (arguments.length == 1) {
                y = arguments[0].clientY;
                x = arguments[0].clientX;
            }
            $('.OxTooltip').remove(); // fixme: don't use DOM
            that.appendTo(Ox.UI.$body);
            width = that.width();
            height = that.height();
            left = Ox.limit(x - width / 2, 0, window.innerWidth - width);
            top = y > window.innerHeight - height - 16 ? y - 16 - height : y + 16;
            that.css({
                left: left + 'px',
                top: top + 'px'
            });
            self.options.animate && that.animate({
                opacity: 1
            }, 250);
        }
        return that;
    };

    return that;

};