Kendo UI Tabstrip 和 jQuery Tooltipster 重叠问题

Question

我正在使用 MVC4、Kendo tabstrip 和 jQuery Tooltipster 来显示验证消息。

我的问题是来自 Tab 1 的验证消息由于 z-index 而与 Tab 2 重叠。我已经尝试为 tooltipster-base 设置 z-index 但不起作用。

我的 HTML 代码如下所示：

<div id="tabstrip">
    <ul> 
      <li>Tab 1</li>
      <li>Tab 2</li>
    </ul>
    <div><form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form></div>
    <div><form id="myform2">
    <input type="text" name="field3" />
    <input type="text" name="field4" />
    <br/>
    <input type="submit" />
</form></div>
  </div>

脚本：

$(document).ready(function () {
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabstrip.select(0);

    // initialize tooltipster on text input elements
    $('#myform input[type="text"]').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });

    $('#myform2 input[type="text"]').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });

    // initialize validate plugin on the form
    $('#myform').validate({
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        },
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

    // initialize validate plugin on the form2
    $('#myform2').validate({
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        },
        rules: {
            field3: {
                required: true,
                email: true
            },
            field4: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });


});

请检查： JSFiddle：http://jsfiddle.net/vishalvaishya/bCZWd/2/

请帮助我设置正确的 CSS 样式。

Answer 1

只有我自己找到了解决方案。可能对某人有帮助。

对工具提示器逻辑进行了一些更新。

添加了额外的选项(appendTo) 仅将工具提示放置在特定元素上：

c = {
     animation: "fade",
     appendTo: "body", 
     arrow: true,
... 

并在showTooltip函数中更改了tooltipster.appendTo('body')的参数，例如；

tooltipster.appendTo($(l.options.appendTo));

用法：

$('#profileForm input[type="text"]').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right',
        appendTo: '#profileForm'        
});

像这样，您可以在不同的剑道选项卡或不同的 div 上使用 tooltipster。

在 JSFiddle 上查看：

上一个：http://jsfiddle.net/vishalvaishya/bCZWd/2/

工作：http://jsfiddle.net/vishalvaishya/bCZWd/3/