开发者

jquery tooltips and dialog

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 th开发者_StackOverflow中文版e 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?


This question may help about using z-index. The value you tried is bigger than the max allowed.


Have you given position attribute in styles? If you want to use z-index you must set position property before.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜