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'        
});

像这样你可以在不同的kendo-tabs或不同的div上使用tooltipster。

参见JSFiddle：

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

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

Kendo UI Tabstrip和jQuery Tooltipster Overlapping问题

1 个答案: