Search code examples
javascriptqtip2

qTip2: how to display a tooltip within a tooltip?


I am using qTip2 to display a text box, within which there is a link. I want to display a tooltip when mouse is over this link.

Cannot figure out how to do this.

First, is this doable? And then how if yes?

Thanks for help!

Edit

Dihedral, thanks so much for your info. I followed your approach, but it is still not working. I looked at the html code of the page and notice that in your jsFiddle code, additional html is generated (by qTip) for the second tooltip popup. But in my case, I cannot find such additional html.

The following is my code and this is the jsFiddle link 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;
}   

Solution

  • Modifying my answer to use your example code:

    Your first qTip uses

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

    for the content. That technique will result in a clone of the #author-container elements, instead of using the existing elements. So your second qTip was being applied, but it was getting applied to elements that were never appearing on screen.

    I took away the .html() and it worked for me. Try this: http://jsfiddle.net/bacqe/13/

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