Rectangle 27 0

If I remember correctly, both create a new element inside the body tag. So this should be a simple z-index problem. Just find the classes (inspect elements, see what classes they have, find them... you know... usual stuff) and change z-index so the tooltip has a bigger one.

As an alternative, you could set z-index from script, when you are calling the tooltip (or the modal window, doesn't matter), but I recommend against it. A css solution is cleaner and faster.

I had left in a rule in my own css that was changing the default z-index for the dialog.

css - jquery tooltip is rendering behind modal window - Stack Overflow

jquery css jquery-ui
Rectangle 27 0

I found out that there is a conflict between Bootstrap and JQUery UI on the .tooltip() function. I was loading JQuery UI last, so it took precedence.

I reversed the loading order and loaded the Bootstrap JS file last and now it all works as expected.

jquery - Bootstrap Tooltip showing behind modal MVC 5 - Stack Overflow

jquery asp.net-mvc twitter-bootstrap asp.net-mvc-5
Rectangle 27 0

  • Use $(this).tooltip().tooltip('close'); in combination with clearing title attribute and resetting it on blur
$(document).ready(function () {
    //key point in fix: '*' instead of document
    initTooltip('*');
});
$(document).on({
    focus: function (e) {
        $('.ui-tooltip').hide();
        tempTitle = $(this).attr("data-title");
        $(this).attr("data-title", "");
        //key point in fix: close works even if tooltip isn't showing yet
        $(this).tooltip().tooltip('close');
    },
    blur: function (e) {
        $(this).attr("data-title", tempTitle);
    }
}, '.element1, .element2, #box');

function initTooltip(target) {
    $(target).tooltip({
        track: true,
        content: function () {
            return $(this).attr("data-title");
        },
        show: {
            delay: 1500
        },
        open: function (event, ui) {
            setTimeout(function () {
                $(ui.tooltip).fadeTo(1000, 0);
            }, 5000);
        }
    });
}

jQuery tooltip showing behind dropdown - Stack Overflow

jquery jquery-ui jquery-tooltip jquery-ui-tooltip
Rectangle 27 0

I found out that there is a conflict between Bootstrap and JQUery UI on the .tooltip() function. I was loading JQuery UI last, so it took precedence.

I reversed the loading order and loaded the Bootstrap JS file last and now it all works as expected.

jquery - Bootstrap Tooltip showing behind modal MVC 5 - Stack Overflow

jquery asp.net-mvc twitter-bootstrap asp.net-mvc-5
Rectangle 27 0

  • Use $(this).tooltip().tooltip('close'); in combination with clearing title attribute and resetting it on blur
$(document).ready(function () {
    //key point in fix: '*' instead of document
    initTooltip('*');
});
$(document).on({
    focus: function (e) {
        $('.ui-tooltip').hide();
        tempTitle = $(this).attr("data-title");
        $(this).attr("data-title", "");
        //key point in fix: close works even if tooltip isn't showing yet
        $(this).tooltip().tooltip('close');
    },
    blur: function (e) {
        $(this).attr("data-title", tempTitle);
    }
}, '.element1, .element2, #box');

function initTooltip(target) {
    $(target).tooltip({
        track: true,
        content: function () {
            return $(this).attr("data-title");
        },
        show: {
            delay: 1500
        },
        open: function (event, ui) {
            setTimeout(function () {
                $(ui.tooltip).fadeTo(1000, 0);
            }, 5000);
        }
    });
}

jQuery tooltip showing behind dropdown - Stack Overflow

jquery jquery-ui jquery-tooltip jquery-ui-tooltip