$(this).next('div') not grabbing the content in jQuery

Question

I am using jQuery 1.11.1 and qTip 2.2.2 and this js code to grab the content of my hidden div element for qTip:

$(document).ready( function () {

    $('.hasTooltip').each(function() {
    $(this).qtip({
            content: {
                text: $(this).next('div') 
            }
        });
    });

});

And the html is:

<div class="hasTooltip">Hover me to see a tooltip</div>
<div class="hidden">This is just a test!</div>

But it's not working, meaning the yellow qtip bubble shows up on hover, but there is no text at all. However, if I try it put there manualy like this:

content: {
    text: "Test!"
}

Then the tooltip shows like expected.

Any idea what am I doing wrong?

SOLVED + REQUEST @qTtip developers

Dear qTip developers,

Please add the .html() to the end of $(this).next('div') like this $(this).next('div').html(). Currently your default solution without the .html() was not working for me. Thank you. Additional info I am using Bootstrap 3 and Laravel 4 together with qTip.

Answer 1

Might be because text property does not accept a jQuery object so try to pass the contents of the div as its value

$(document).ready(function () {

    $('.hasTooltip').each(function () {
        $(this).qtip({
            content: {
                text: $(this).next('div').html()
            }
        });
    });

});