Kendo UI Tabstrip и jQuery Tooltipster Проблема перекрытия

Я использую вкладку MVC4, Kendo вместе с jQuery Tooltipster для отображения сообщений проверки.

Моя проблема заключается в том, что сообщение проверки на вкладке 1 перекрывается на вкладке 2 из-за z-index. Я попытался установить z-index для tooltipster-base, но не работает.

Мой 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.


person Vishal Vaishya    schedule 04.07.2013    source источник


Ответы (1)


Нашел решение только сам. Может кому пригодится.

Сделано некоторое обновление в логике всплывающей подсказки.

Добавлена ​​дополнительная опция (appendTo) для размещения всплывающей подсказки только над определенным элементом:

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

И изменил параметр tooltipster.appendTo('body') в функции showTooltip, например;

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

Применение:

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

Таким образом, вы можете использовать всплывающую подсказку на разных вкладках кендо или в разных разделах.

См. на JSFiddle:

Предыдущая: http://jsfiddle.net/vishalvaishya/bCZWd/2/

Рабочий: http://jsfiddle.net/vishalvaishya/bCZWd/3/

person Vishal Vaishya    schedule 04.07.2013