Why qtip2 plugin isn't working with HTML?

Question

I'm trying to do a html tooltip with qtip2. But, following the simple example in the site i just adjusted with my class. But, I don't know why this is not working. If I change .formreprovar' to .tooltiptext it works normally. Thanks

JSFIDDLE

JS

$(document).ready(function()
{
$('.reprovar').qtip({
            position: {
            my: 'bottom center',
             at: 'top center'
             },
             style: {
                classes: 'qtip-light'
             },
             content: {
             button: 'close',
             text: $(this).nextAll('.formreprovar').first()
            },
            hide: {
                fixed: true,
                event: false
            },
            show: {
                event: 'click'
            }
        });
   });

HTML

<input type="button" value="Reprovar" class="btn btn-danger reprovar">
<div class="formreprovar">
<input type="text" />
<b>oiiiiiiiiiiii</b>
</div>

CSS

body {
    padding: 50px;
}
.tooltiptext {
    display: none;
}
.formreprovar {
    display: none;
}

Answer 1

Try this

$(this).nextAll('.formreprovar').first().text()

next gets the immediately following sibling of the selector. If it is not found then it is just an empty jQuery object

.next('.tootiptext') works as it is the immediate sibling whereas .formreprovar is not

Also don't forget the .text() part after the selector.

Check Fiddle

UPDATE

Looks like the problem is the this context inside the text method.

Wrap that inside a function so that the context points to the element in question.

content: {
      button: 'close',
      text: function() {
          return $(this).nextAll('.formreprovar').first()
      }
},

Working Fiddle