Question

我试图将qTips定位在div下，如上所示。尖端的宽度与容纳目标（A，B，C）的容器的宽度相同。我试图让尖端直接定位在容器下方，但我希望角落相对于目标定位。

如何配置qTip2以实现此对齐？

目标B很简单......

    position: {
        my: 'top center',
        at: 'bottom center'
    },
    style: {
        width: 350,
        tip: {
            height: 10,
            width: 12
        }
    },

但目标A和C给我带来了麻烦

如果我为目标A添加一些style.tip配置：

    position: {
        my: 'top center',
        at: 'bottom center'
    },
    style: {
        width: 350,
        tip: {
            height: 10,
            width: 12,
            corner: 'top left',
            mimic: 'center'
        }
    },

角落位于目标中心下方......它偏向左侧

如果我添加了tip.offset，那么角落似乎正确偏移，但整个尖端移动了相等的数量，不再与容器对齐。

    position: {
        my: 'top center',
        at: 'bottom center'
    },
    style: {
        width: 350,
        tip: {
            height: 10,
            width: 12,
            corner: 'top left',
            mimic: 'center',
            offset: 60 // about half the width of Target A
        }
    },

如何配置qTip2以使此尖端与容器对齐，并且角落与目标对齐？

Answer 1

以下是我如何解决它：

目标A的

position: {
    my: 'top center',
    at: 'bottom center'
},
style: {
    width: 350,
    tip: {
        height: 10,
        width: 12,
        offset: -120 // offset from the center
    }
},

目标B的

position: {
    my: 'top center',
    at: 'bottom center'
},
style: {
    width: 350,
    tip: {
        height: 10,
        width: 12,
        offset: 120 // offset from the center
    }
},

qTip2：定位尖端，并定位角

1 个答案: