qTip2:如何在工具提示中显示工具提示

qTip2: how to display a tooltip within a tooltip?

本文关键字：工具提示 显示 qTip2      更新时间：2023-09-26

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

我不知道该怎么做。

首先，这可行吗?如果是呢?

谢谢你的帮助!

编辑

Dihedral，非常感谢你的信息。我按你的方法做了，但还是不管用。我查看了页面的html代码，注意到在jsFiddle代码中，(通过qTip)为第二个工具提示弹出生成了额外的html。但在我的情况下，我找不到这样的额外的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;
}

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

你的第一个qTip使用

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

表示内容。这种技术将导致#author-container元素的克隆，而不是使用现有的元素。所以你的第二个qTip被应用了，但是它被应用到从未出现在屏幕上的元素上。

我拿走了。html()，它为我工作。试试这个:http://jsfiddle.net/bacqe/13/

content: {
    text: $('#author-container')
},
相关文章：