Kendo UI Tabstrip和jQuery Tooltipster重叠问题

我正在使用MVC4，Kendo tabstrip和jQuery Tooltipster来显示验证消息。Kendo UI 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样式。

来源

2013-07-04 Vishal Vaishya

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

在工具提示器逻辑中完成一些更新。

增加额外的选项(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/

来源

2013-07-04 12:28:58

Kendo UI Tabstrip和jQuery Tooltipster重叠问题

回答

相关问题