为什么qtip2插件不是't使用HTML

Why qtip2 plugin isn't working with HTML?

本文关键字：使用 HTML qtip2 插件 为什么      更新时间：2023-09-26

我正在尝试用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;
}

试试这个

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

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

.next('.tootiptext')是直接同级，而.formreprovar不是

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

检查Fiddle

更新

问题似乎出在text方法内的this上下文上。

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

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

工作Fiddle

相关文章：