Speech balloon is misplaced

[Siderite]

I believe the issue comes from the balloon._position function, where you use var o = this._targetEl.offset();. Since the positioning of both balloon and agent is fixed, this.targetEl.position should be used. Alternatively, the balloon could be defined as position:absolute, but that breaks when scrolling.

Here is my fix. It might not work for all cases:

        clippy.Balloon.prototype._position=function (side) {
            var o = this._targetEl.position();
            var h = this._targetEl.height();
            var w = this._targetEl.width();

            var bH = this._balloon.outerHeight();
            var bW = this._balloon.outerWidth();

            this._balloon.removeClass('clippy-top-left');
            this._balloon.removeClass('clippy-top-right');
            this._balloon.removeClass('clippy-bottom-right');
            this._balloon.removeClass('clippy-bottom-left');

            var left, top;
            switch (side) {
                case 'top-left':
                    // right side of the balloon next to the right side of the agent
                    left = o.left + w - bW;
                    top = o.top - bH - this._BALLOON_MARGIN;
                    break;
                case 'top-right':
                    // left side of the balloon next to the left side of the agent
                    left = o.left;
                    top = o.top - bH - this._BALLOON_MARGIN;
                    break;
                case 'bottom-right':
                    // right side of the balloon next to the right side of the agent
                    left = o.left;
                    top = o.top + h + this._BALLOON_MARGIN;
                    break;
                case 'bottom-left':
                    // left side of the balloon next to the left side of the agent
                    left = o.left + w - bW;
                    top = o.top + h + this._BALLOON_MARGIN;
                    break;
            }

            this._balloon.css({top:top, left:left});
            this._balloon.addClass('clippy-' + side);
        };

        clippy.Balloon.prototype._isOut=function () {
            var o = this._balloon.offset();
            var bH = this._balloon.outerHeight();
            var bW = this._balloon.outerWidth();

            var wW = $(window).width();
            var wH = $(window).height();
            var sT = $(document).scrollTop();
            var sL = $(document).scrollLeft();

            var top = o.top - sT;
            var left = o.left - sL;
            var m = 5;

            var outX=0;
            var outY=0;
            if (top - m < 0) outY= (m - top)/wH;
            if (left - m < 0) outX= (m-left)/wH;
            if ((top + bH + m) > wH) outY= top + bH + m/wH-1;
            if ((left + bW + m) > wW) outX= left + bW + m/wW-1;

            return Math.sqrt(outX*outX+outY*outY);
        };

        clippy.Balloon.prototype.reposition=function () {
            var sides = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];

            var minOut=100000;
            var side;
            for (var i = 0; i < sides.length; i++) {
                var s = sides[i];
                this._position(s);
                var out=this._isOut();
                if (out<minOut) {
                    minOut=out;
                    side=s;
                    if (!out) break;
                }
            }
            if (minOut) {
                this._position(side);
                var pos=this._balloon.position();
                if (pos.top<0) pos.top=5;
                if (pos.top>$(window).height()-this._balloon.outerHeight()-5) pos.top=$(window).height()-this._balloon.outerHeight()-5;
                if (pos.left<0) pos.left=5;
                if (pos.left>$(window).width()-this._balloon.outerWidth()-5) pos.left=$(window).width()-this._balloon.outerWidth()-5;
                this._balloon.css(pos);
            }
        };

[tsejerome]

This needs more love, works for me.
This is quite important if you want your clippy not to be position fixed too