JQuery Tooltip Not Working In Internet Explorer

Question

I have a JQuery tooltip that won't show in IE when I deploy to my application server. It works when I debug it locally on my computer using IE, and it also works in Chrome on the server and locally. How can I fix this to make it work with IE on the server?

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<style type="text/css">
    .tooltip {
        display:none;
        position:absolute;
        border:1px solid #333;
        background-color:#161616;
        border-radius:5px;
        padding:10px;
        color:#fff;
        font-size:12px;
    }
</style>
<script type="text/javascript">$(document).ready(function () {
   // Tooltip only Text
   $('.masterTooltip').hover(function () {
    // Hover over code
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
    .text(title)
    .appendTo('body')
    .fadeIn('slow');
    }, function () {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
    }).click(function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
    .css({ top: mousey, left: mousex })
    });
});
</script>

How it looks like in Chrome:

Answer 1

Did you check if all the .js files are loaded properly in IE while browsing from server? Please check in Network window of IE developer tools (can be loaded by using F12 key).

You may want to run the page from server without Compatibility mode. You can also disable the compatibility mode by adding this in your HTML header-

<meta http-equiv="X-UA-Compatible" content="IE=edge">