Javascript 如何在不使用任何容器的情况下，在文本框上方以语法方式显示div？

以下是场景：

我有几个文本框，我想在工具提示或类似的东西中显示验证消息。我不想使用任何插件。如何做到这一点

HTML

<input type="text" class="check"   />
<input type="text" class="check"   />

<input type="text" class="check"   />
<input type="text" class="check"   />

JQUERY

$('.check').on('blur',function(){
     var value=$(this).val();
    var validationdiv='<div class="tooltip-inner">'+value+'</div>'
    $(this).ShowAbove(validationdiv); //I know it does not exists

});

$（'.check'）。在（'blur'，function（）上{
var值=$（this.val（）；
var validationdiv=''+value+''
$（this.showOver（validationdiv）；//我知道它不存在
});

为您的邮件使用如下样式

.validation-msg {
  position: absolute;
  top: -10px;
}

---

在之后插入，并使用超时时间将其删除

$('.check').on('blur',function(){
    var value=$(this).val();
    var validationdiv='<div class="tooltip-inner">'+value+'</div>'
    $(this).after(validationdiv);
    setTimeout(function() {
      $('.tooltip-inner').remove();
    }, 2000);
});

$（'.check'）。在（'blur'，function（）上{
var值=$（this.val（）；
var validationdiv=''+value+''
$（此）.after（validationdiv）；
setTimeout（函数（）{
$（'.tooltip-inner'）.remove（）；
}, 2000);
});

此外，您可能希望将输入放在带有

位置：相对的容器中，这样您就可以使用带有负边距的绝对位置来从输入字段偏移工具提示

您可以尝试以下方法：

HTML

<input type="text" class="check"   />
<input type="text" class="check"   />

<input type="text" class="check"   />
<input type="text" class="check"   />

JS

div.tooltip-inner {
    background-color: #999;
    position: absolute;
    display: none;
}

$('.check').on('blur',function(){
    $(this).prev('div.tooltip-inner').remove();

    var position = $(this).position(),
        validationdiv = $('<div></div>')
            .addClass('tooltip-inner')
            .text($(this).val())
            .css({
                left: position.left,
                width: $(this).outerWidth()
            })
            .insertBefore($(this));
        validationdiv.css({
            top: position.top - validationdiv.height(),
            display: 'block'
        });
});

$（'.check'）。在（'blur'，function（）上{
$（this.prev（'div.tooltip-internal'）.remove（）；
var position=$（this）.position（），
validationdiv=$（''）
.addClass（'工具提示-内部'）
.text（$（this）.val（））
.css({
左：位置，左，
宽度：$（this）.outerWidth（）
})
.insertBefore（$（本））；
validationdiv.css({
顶部：position.top-validationdiv.height（），
显示：“块”
});
});


注意：初始的
显示：无
用于将工具提示插入dom中，以便能够计算其高度
在

之前使用

，
$（此）.before（validationdiv）@Tushar你知道这可能有用。但它将继续在每次div之后添加div。我是否可以在特定时间间隔后自动添加并删除它？只要没有带
位置：relative
的容器，这将在屏幕外显示消息。