css - Kendo UI Tabstrip 和 jQuery Tooltipster 重叠问题

Question

我使用 MVC4、Kendo tabstrip 以及 jQuery Tooltipster 来显示验证消息。

我的问题是，由于 z-index，来自选项卡 1 的验证消息在选项卡 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/