Boostrap 3 Tooltip and IScroll Javascript conflicting in Head tag

Question

Can't seem to figure out the problem with this code. ToolTip works if i remove IScroll, and vis versa. Any clue would help. below is my head section for this page.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="">
<meta name="author" content="mydomain.com">

<title>My Title</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

<!-- Timeline CSS -->
<link href="css/plugins/timeline.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/app.css">

<!-- Exam Plugin -->
<link type="text/css" rel="stylesheet" href="lib/css/styles.css" media="screen"/>

<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>

<!-- IScroll -->
<script type="text/javascript" src="iscroll.js"></script>

<!-- Functions -->
<script type="text/javascript">
    // Tooltip function
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({ 'placement': 'top' });
    });

    //IScroll
    var myScroll;
    function loaded () {
        myScroll = new IScroll('#wrapper', {
            scrollbars: false,
            hscroll: false,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>

Benn reading about JQuery noconflict() but not sure if that applies to the above. to single out the code i'm having issues with, here it is without the rest of the head section.

<!-- Functions -->
<script type="text/javascript">
    // Tooltip function
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({ 'placement': 'top' });
    });

    //IScroll
    var myScroll;
    function loaded () {
        myScroll = new IScroll('#wrapper', {
            scrollbars: false,
            hscroll: false,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>

Answer 1

You should wrap your iScroll code in an immediately invoked function expression to prevent global namespace conflicts like so:

(function ($) {
    $(function () {
        var myScroll = new IScroll('#wrapper', {
            scrollbars: false,
            hscroll: false,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    });
})(jQuery);

I added in document ready as well and did away with the function wrapper because I don't see you calling it anywhere.