Bootstrap Tooltip showing behind modal MVC 5

Question

I am unable to get my Bootstrap Tooltips to show properly inside my Modal.

I have a MVC Site where i sometimes load Partial Views with Ajax and show them inside a Modal. When the user Clicks the button, i perform the Get and update the Modal Body with the Html. My code contains my current test to get the Modal to show properly.

        $.ajax({
        url: url,
        type: 'GET',
        success: function (response) {
            $('#modal-Levering-body').html(response);

            var button = $('#UdleveringVHButton');
            button.attr('value', 'Found the button');
            button.tooltip({ container: '#modal-Levering-body' });
        }

My Button is defined in my View as

        <input type="button" id="UdleveringVHButton" value="Udlevering VH" class="btn btn-xs" title="Sæt alle varer til Udlevering Varehus"
           data-tooltip="yes" data-placement="top" />

This is the result when i mouse-ver the 'found the button' button

The Weird thing is that when i try this on JSFiddle, it works just fine http://jsfiddle.net/z6qqvycf/

I am limited in my debugging, because i do not know how to inspect the Tooltip. It is not visible from Chrome Development Tools.

I have also looked at Bootstrap tooltip showing behind modal window but this did not affect my situation.

Any suggestions on how to debug and fix this situation?

EDIT:

Found this guide on how to Inspect the Tooltip:

Freeze screen in chrome debugger / DevTools panel for popover inspection?

EDIT2:

I found that my Tooltip is entirely different than my JSFiddler JSFiddler

My MVC Setup

Somehow the .tooltip function is generating something entirely different on my setup than in my JSFiddler. Unknown why currently.

EDIT 3

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

I reversed the loading order and now it all works as expected jQueryUI Tooltips are competing with Twitter Bootstrap

How do i check Z-index of that div? It is not available in the Chrome Developer pane. When i remove my mouse from the button's mouseover the tooltip dissapears — JesperGJensen, Jan 27 '16 at 12:22
Try adding data-container="body" (e.g. html body element) or whatever the id is on your dialog. I guess data-container="modal-Levering-body". — richardb, Jan 29 '16 at 11:46

score 1 · Accepted Answer · answered Feb 08 '16 at 13:43

1

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.

answered Feb 08 '16 at 13:43

JesperGJensen

403
8
24

Bootstrap Tooltip showing behind modal MVC 5

1 Answers1