kendo ui工具提示位置

Question

我正在使用kendo ui进行网页设计，目前我仍然坚持我的验证工具提示的定位。很奇怪，对于任何下拉列表，它显示在我希望它出现的位置，即输入下方，但对于纯文本输入，验证工具提示出现在输入元素旁边。这使我的页面看起来不一致。我已经搜索了kendo文档中的工具提示，但它没有像我希望的那样详细，并没有提供太多帮助。

任何想法如何确保我的验证工具提示，无论其应用的元素类型如何，都会显示在要验证的字段下方？

请参阅屏幕截图以获得更多说明：

提前致谢。

Answer 1

这实际上取决于页面的标记和样式。将display: block添加到输入字段可能会解决问题，或者如果您使用float，则会在验证消息中添加clear:left和必要的margin。

Answer 2

我发现的最佳解决方案是覆盖CSS .k-tooltip-validation并将其放在您想要的任何位置，如下例所示：

.k-tooltip-validation {
        margin-top: -40px !important; 
}

希望它有所帮助！ ：）

Answer 3

您可以尝试这样的事情。

我遇到了很多麻烦，因为我可以在validate事件中添加一个回调处理程序，但它不仅仅是在帖子上调用模糊事件而且我想让内联实时显示在顶部的摘要中。

首先禁用validateOnBlur，以便不弹出默认内容。

 var validatable = $("form").kendoValidator( { 
    validateOnBlur:false,
    ...
    });

接下来，您可以添加自己的验证回调。

正如我所说，这不会被称为模糊。

        validateOnBlur:false,
        validate: function (e) {
          ....
        },

调用模糊验证，以便字段以蓝色更新。

因为我们禁用了这个，所以请确保它在表单帖子和模糊时都被调用。

    $("#input, textarea").on("blur", function (validator) {
        validator.validatable.validate();
    }.bind(null,this));

      // valid on submit where you like
    submit: function () {
        if (this.validatable.validate()) {
            $("#form1").submit();
        }
    },

摘要很容易。我把它们放在我的页面顶部的控件中，带有类错误 - 部分

我将错误复制并在摘要中将它们放在页面上的其他位置。我还使用一些jquery在标签前放一个小星星。请注意 next（）是包含错误文本的范围。

        validate: function (e) {
            $(".k-invalid").next().each(function () {
                $(".errors-section").append($(this).text()).show();
                $(this).text("");
            });
        },

这对我有用。