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

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

/*@
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) {

    var self = self || {},
        that = new Ox.Element({}, self)
            .defaults({
                animate: true,
                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.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 (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;

};