Tooltip disappearing off bottom of screen

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Open a page in an IFrame (I was using LightView)
2. Put a tooltip on an element at the bottom of the page
3. Mouseover the tooltip

What is the expected output? What do you see instead?
The tooltip should appear above the mouse but instead it appears below
causing scrollbars to appear.

What version of the product are you using? On what operating system?
Version 1.0, Windows XP

Please provide any additional information below.
I solved this issue by adding the following code into the setup function: ~

this.options.height = this.tooltip.getHeight();

if((this.yCord + this.options.height + 12) >=
Element.getHeight(document.body)) {
    this.yCord = this.yCord - (this.options.height + 20);
}

Original issue reported on code.google.com by thechris...@gmail.com on 12 May 2008 at 12:03

[GoogleCodeExporter]

I went a step further and an arrow for the top of the box, and added scrolling
detection on the measurements.  This seems to work rather well, although i'm 
sure the
code could be cleaned up a bit, maybe author will do this with his next release.

    setup: function(){
        //MR This was added into flip the tooltip to the top of the mouse cursor if it
comes near the bottom of the screen.
        this.options.height = this.tooltip.getHeight();

        // If content width is more then allowed max width, set width to max
        if(this.options.width > this.options.maxWidth) {
            this.options.width = this.options.maxWidth;
            this.tooltip.style.width = this.options.width + 'px';
        }

        // Tooltip doesn't fit the current document dimensions
        if((this.yCord + this.options.height + 12) >= (document.viewport.getHeight() +
document.viewport.getScrollOffsets().top) && //it's on the top
                parseInt(this.xCord) + parseInt(this.options.width) >=
(document.viewport.getWidth() + document.viewport.getScrollOffsets().left)) 
{//it
should go on the right
            this.yCord = this.yCord - (this.options.height + 20);//puts box on top of cursor

                this.options.align = "right";
                this.xCord = this.xCord - this.options.width + 20;
                this.tooltip.down('.xarrowbot').show();
                this.tooltip.down('.xarrowbot').setStyle({left: this.options.width - 24 + 'px'});
                this.tooltip.down('.xarrowtop').hide();

        } else if ((this.yCord + this.options.height + 12) >=
(document.viewport.getHeight() + document.viewport.getScrollOffsets().top) && 
//it's
on the top
                parseInt(this.xCord) + parseInt(this.options.width) <=
(document.viewport.getWidth() + document.viewport.getScrollOffsets().left)) 
{//it
should go on the left) {
            this.yCord = this.yCord - (this.options.height + 20);//puts box on top of cursor

            this.options.align = "left";
            this.tooltip.down('.xarrowbot').show();
            this.tooltip.down('.xarrowbot').setStyle({left: 12 + 'px'});
            this.tooltip.down('.xarrowtop').hide();

        }   else if(parseInt(this.xCord) + parseInt(this.options.width) >=
(document.viewport.getWidth() + document.viewport.getScrollOffsets().left)) { 
//going
to be on bottom
            this.options.align = "right";
            this.xCord = this.xCord - this.options.width + 20;
            this.tooltip.down('.xarrowtop').show();
            this.tooltip.down('.xarrowtop').setStyle({left: this.options.width - 24 + 'px'});
            this.tooltip.down('.xarrowbot').hide();
        } else {
            this.options.align = "left";
            this.tooltip.down('.xarrowtop').show();
            this.tooltip.down('.xarrowtop').setStyle({left: 12 + 'px'});
            this.tooltip.down('.xarrowbot').hide();
        }

        this.tooltip.style.left = this.xCord - 7 + "px";
        this.tooltip.style.top = this.yCord + 12 + "px";

    },

This line changed,
// Building and injecting tooltip into DOM
this.tooltip.insert(arrowTop).insert(top).insert(content).insert(bottom).insert(
arrowBot);
//this.tooltip.insert(top).insert(content).insert(bottom);

This line add.
var arrowBot = new Element("div", { className: "xarrow xarrowbot" }).insert('<b
class="a6"><b class="a5"><b class="a4"><b class="a3"><b
class="a2"><b class="a1">').setStyle({marginTop:'-3px'});

This line modified (old arrow element)
var arrowTop = new Element("div", { className: "xarrow xarrowtop" }).insert('<b
class="a1"><b class="a2"><b class="a3"><b class="a4"><b
class="a5"><b class="a6">');

Original comment by reynardm...@gmail.com on 12 Feb 2010 at 6:03