0

我正在使用 qTip2 显示一个文本框，其中有一个链接。当鼠标悬停在此链接上时，我想显示一个工具提示。

无法弄清楚如何做到这一点。

首先，这可行吗？然后如果是的话怎么办？

感谢帮助！

编辑

二面角，非常感谢您的信息。我遵循了您的方法，但仍然无法正常工作。我查看了页面的 html 代码，并注意到在您的 jsFiddle 代码中，为第二个工具提示弹出窗口生成了额外的 html（由 qTip）。但就我而言，我找不到这样的附加 html。

以下是我的代码，这是 jsFiddle 链接http://jsfiddle.net/mddc/bacqe/6/

    $('#author').qtip({
    content: {
        text: $('#author-container').html()
    },
    show: {
  solo: false,
        event: 'mouseover'
    },      
    hide: {
        event: 'unfocus'
    },
    style: {
        tip: false,
        classes: 'author-content forcedzLowIndex'
    },      
    position: {
        my: 'top right',
        at: 'bottom right'
    },
    events: {
        render: function() {
            buildQtipInfoTooltip($('#author-allow-friends-link'), 'title', 'forcedzHighIndex');
        }
    }
}); 

function buildQtipInfoTooltip(jEle, attr_name, classes) {
    jEle.qtip({
        content: jEle.attr(attr_name),
        position: {
            at: 'bottom right',
            viewport: $(window),
            adjust: {
                y: 4,
                x: 0,
                method: 'shift'
            }
        },
        style: {
            classes: 'tooltip' + ' ' + classes,
            tip: false
        }
    }); 
}   

.forcedzLowIndex {
    z-index: 10000 !important;
}

.forcedzHighIndex {
    z-index: 99999 !important;
}
4

1 回答 1

2

修改我的答案以使用您的示例代码：

您的第一个 qTip 使用

content: {
    text: $('#author-container').html()
},

为内容。该技术将导致 #author-container 元素的克隆，而不是使用现有元素。因此，您的第二个 qTip 已被应用，但它被应用于从未出现在屏幕上的元素。

我拿走了 .html() ，它对我有用。试试这个：http: //jsfiddle.net/bacqe/13/

content: {
    text: $('#author-container')
},
于 2013-05-03T15:17:21.697 回答