javascript - 为什么 qtip2 插件不支持 HTML？

Question

我正在尝试用 qtip2 做一个 html 工具提示。但是，按照网站中的简单示例，我刚刚调整了我的类(class)。但是，我不知道为什么这不起作用。如果我将 .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 获取选择器的紧随其后的兄弟。如果没有找到，那么它只是一个空的 jQuery 对象

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

另外不要忘记选择器之后的 .text() 部分。

Check Fiddle

更新

看起来问题出在 text 方法中的 this 上下文。

将其包装在一个函数中，以便上下文指向相关元素。

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

Working Fiddle