javascript - 为什么 qtip2 插件不适用于 HTML？

Question

我正在尝试使用 qtip2 做一个 html 工具提示。但是，按照网站中的简单示例，我刚刚调整了我的班级。但是，我不知道为什么这不起作用。如果我改成.formreprovar' 它 .tooltiptext可以正常工作。谢谢

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

尝试这个

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

next获取选择器的紧随其后的兄弟。如果没有找到，那么它只是一个empty jQuery object

.next('.tootiptext')工作，因为它是直接兄弟，而 .formreprovar 不是

也不要忘记.text()选择器后面的部分。

检查小提琴

更新

看起来问题是方法this内部的上下文text。

将其包装在一个函数中，以便上下文指向有问题的元素。

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

工作小提琴