Kendo UI Tabstrip and jQuery Tooltipster Overlapping issue

Question

I'm using MVC4,Kendo tabstrip along with jQuery Tooltipster for showing validation messages.

My issue is the validation message from Tab 1 is getting overlapped on Tab 2 due to z-index. I have tried setting z-index for tooltipster-base but isn't working.

My HTML code looks like something this:

<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>

Script:

$(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;
        }
    });


});

Please check this: JSFiddle: http://jsfiddle.net/vishalvaishya/bCZWd/2/

Please help me for setting proper css style.

Answer 1

Found solution myself only. Might be helpful for someone.

Done some updation in tooltipster logic.

Added extra option (appendTo) to place tooltip over specific element only:

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

And changed parameter of tooltipster.appendTo('body') in showTooltip function like;

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

Usage:

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

Like this you can use tooltipster on different kendo-tabs or on different divs.

See on JSFiddle:

Previous : http://jsfiddle.net/vishalvaishya/bCZWd/2/

Working : http://jsfiddle.net/vishalvaishya/bCZWd/3/