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重疊問題

回答

相關問題