Hints and jquery dialog

Question

I am using the JQuery Tools Tooltip (http://flowplayer.org/tools/tooltip/index.html) and I am trying to get a dynamic plugin to work. This means changing the position of the tooltip if the position you set is outside the screen (if it is turned off at the top of the screen, it will be shown below the item to which the tooltip refers).

Ideally, I want to replicate this inside the jQuery dialog so that if the title bar disables the tooltip, it will be displayed below the element to which it belongs.

As an alternative, I would like a tooltip to appear on top of the title bar. I tried to set the z-index tooltip to 999999999999, but it still appeared under the heading.

Any ideas, stack?

Answer 1

The problem was not with z-index or position attributes, but with overflow. The tooltip did not work with "auto", but it worked with "visible." However, using 'overflow: visible;' you lose the automatic scrollbar on your windows, which is undesirable. So the best solution was to get the dynamic popup plugin to work with the parent sizes of the .ui-dialog-content div instead of the window size.

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
    ];
}

Answer 2

This question may help in using the z-index. The value you tried is greater than the allowed value.

Answer 3

position ? z-index, position .