How to load Bootstrap scripts in environment that might have them already?

http://stackoverflow.com/questions/17194654/how-to-load-bootstrap-scripts-in-environment-that-might-have-them-already

by moderndegree

HTML

<script src="http://requirejs.org/docs/release/2.1.6/minified/require.js"></script>
<script src="//twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="row">
        <a class="btn tooltip1">Before</a> <a class="btn tooltip2">After</a>
    </div>
</div>

JavaScript

// let's say tooltip was defined already
$.fn.tooltip = function(data){
    $(this).mouseover(function(){
        console.log(data.title);
    });
};

// we'll apply the old tooltip to .tooltip1
$('.tooltip1').tooltip({
    title: 'tada',
    placement: 'bottom'
});

// what version of jquery did we have out here
console.log($.fn.jquery);

require({
    'paths': {
      'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min',
      'bootstrap': '//twitter.github.io/bootstrap/assets/js/bootstrap.min'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: '$.fn.tooltip'
        }
    }
}, ['jquery', 'bootstrap'], function($){
    // what version of jquery do we have in here
    console.log($.fn.jquery);
    
    // now we apply the bootstrap tooltip to .tooltip2
    $('.tooltip2').tooltip({
        title: 'tada',
        placement: 'bottom'
    });
});