Question

I am using the jQuery Tools Tooltip (http://flowplayer.org/tools/tooltip/index.html), and I’m trying to get the dynamic plugin to work. What this does is change the position of the tooltip if the position you set it to is outside the screen (if it is cut off by the top of the screen, it will instead be shown below the element that tooltip belongs to).

Ideally, I want replicate this inside of a jQuery Dialog, so that if the Title Bar cuts off the tooltip, it will instead show below the element it belongs to.

Alternately, I would just like the tooltip to be displayed on top of the title bar. I tried setting the tooltip’s z-index to 999999999999 but it still appeared below the title bar.

Any ideas, Stack?

Answer 1

The issue was not with z-index or position attributes, but with overflow. The tooltip didn’t work well with ‘auto’, but it did work with ‘visible’. However, using ‘overflow: visible;’ you lose the auto scroll bar on your windows, which is undesired. So the best solution was to get the dynamic tooltip plugin to work on the parent .ui-dialog-content div dimensions, instead of the window dimensions.

function getCropping(el) {
    var w = $(el).closest('.ui-dialog-content');
    var right = w.offset().left + w.width();
    var bottom = w.offset().top + w.height();
    var toolTipRight = el.offset().left + el.width();
    var toolTipBottom = el.offset().top + el.height();

    return [
        el.offset().top <= w.offset().top,                      // top
        right <= toolTipRight,          // right
        bottom <= toolTipBottom,        // bottom
        w.offset().left >= el.offset().left                     // left
    ];
}