jQuery工具提示和对话框 [英] jquery tooltips and dialog

问题描述

我正在使用jQuery工具工具提示(http://flowplayer.org/tools/tooltip/index.html)，并且正在尝试使动态插件正常工作.如果您将工具提示的位置设置在屏幕外部(如果在屏幕顶部将其切断，它将显示在工具提示所属的元素下方)，则可以更改工具提示的位置.

理想情况下，我想在jQuery对话框中复制此内容，这样，如果标题栏切断了工具提示，它将显示在其所属元素的下方.

或者，我希望工具提示显示在标题栏的顶部.我尝试将工具提示的z-index设置为999999999999，但它仍显示在标题栏下方.

有什么想法吗，堆栈?

解决方案

问题不是z-index或position属性，而是溢出.工具提示不适用于自动"，但适用于可见".但是，使用溢出:可见；"您会丢失视窗上的自动滚动条，这是不希望的.因此，最好的解决方案是让动态工具提示插件在父.ui-dialog-content div尺寸而不是窗口尺寸上运行.

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

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?

解决方案

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

这篇关于jQuery工具提示和对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！