Jquery how hide tooltipster validation messages

Question

As was suggested to me I used tooltipster for error messages with the validation plugin. This solution works well, but I have a problem when I open a dialog window. If there the error message (tooltipster) and I open a dialog (fancybox v2), the tooltipster remains active over the dialog windows. To solve this problem I tried to close the tooltipster in the fancybox beforeShow event, but in this way when I close the dialog box and try to re-validate the tooltip no longer opens.

// initialize tooltipster on text input elements
$('#form-test select').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'bottom'
});

// initialize validate plugin on the form
$("#form-test").validate({
    rules: {
        user: "required",
    },
    messages: {
        user: "error",
    },
    errorPlacement: function (error, element) {

        var lastError = $(element).data('lastError'),
            newError = $(error).text();

        $(element).data('lastError', newError);

        if (newError !== '' && newError !== lastError) {
            $(element).tooltipster('content', newError);
            $(element).tooltipster('show');
        }
    },
    success: function (label, element) {
        $(element).tooltipster('hide');
    },
    submitHandler: function (form) { // for demo
        alert('valid form');
        return false;
    }
});


// fancybox v 2.1.5
$(".various").fancybox({
    maxWidth    : 300,
    maxHeight   : 300,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    type        : 'inline',
    href        : '#modal-msg',
    beforeShow : function()
    {
        // Remove validation tooltipster in the 
        // parent page if present
        //$('[id^="form-"] :input').tooltipster('hide');
    }
});

HTML

<div id="container">
<form id="form-test" action="#">
<select name="user" id="test">
    <option value=""></option>
    <option value="1">1</option>
    <option value="1">2</option>
    <option value="1">3</option>
</select>
<input type="submit" id="validate-btn" value="validate" />
</form>
<br />
<br />
<br />
<input type="button" class="various" value="Open dialog" />
<div id="modal-msg"></div>
</div>

How could I fix it? Thanks

Here a demo:

http://jsfiddle.net/2012j6dv/10/

Answer 1

You should be able to do a z-index hack.

Try

beforeShow : function() {
    // adjust tooltipster's z-index to be less than the fancybox-overlay
    var z = $(".fancybox-overlay").css('z-index');
    $(".tooltipster-base").css('z-index', z-1);
}

Or the other way round

beforeShow : function() {
    // adjust fancybox-overlay z-index to be greater than the tooltipster's 
    var z = $(".tooltipster-base").css('z-index');
    $(".fancybox-overlay").css('z-index', z+1);
}

I think this is safer than hard-coding a CSS directive as one or both of the plugins may dynamically calculate its z-index.

Answer 2

Play with the z-index. Make the fancybox higher and the tooltipster lower :

.tooltipster-base {
    padding: 0px;
    font-size: 0px;
    line-height: 0;
    position: absolute;
    z-index: 99;  //default is 999999
    pointer-events: none;
    width: auto;
    overflow: visible;

}