Uncaught TypeError: $(...).tooltip Is Not A Function In Laravel Application (Bootstrap 4 Preset)

I am building an application with the PHP framework Laravel. I am using the Bootstrap 4 preset and installed a fresh project. Everything is working fine, css, and even the dropdown menu you get from the navbar. But for some reason, I get a Typerror in my console when I try to initatlize the tooltip by doing this. Also tried to initalize the tooltip by a tooltip class but that doesn't seem to work either. I got the same problem with the popover component.

Uncaught TypeError: $(...).tooltip is not a function

Uncaught TypeError: $(...).popover is not a function

I've changed nothing in the JS, except deleting the comments you get from a Laravel installation.

bootstrap.js

window._ = require('lodash');

//Popper for Jquery/Bootstrap
window.Popper = require('popper.js/dist/umd/popper');

//Jquery for Bootstrap
try {
    window.$ = window.jQuery = require('jquery/dist/jquery.slim');

    require('bootstrap');
} catch (e) {}

//Axios for AJAX Calls
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

app.js

//Bootstrap application with dependencies
require('./bootstrap');

//Import Vue
window.Vue = require('vue');

//Vue components
Vue.component('example-component', require('./components/ExampleComponent.vue'));

//Vue init
const app = new Vue({
    el: '#app'
});

//Tooltip init
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

HTML/Blade

<i class="ion-help-circled" data-toggle="tooltip" data-placement="top" title="Dit is het adres waarop de website staat tijdens de testfase"></i>

Also tried to include the tooltip init below the regular scripts in my blade file, but again, doesn't seem to work.

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

</script>

It seems that it is a problem with popper.js I guess, because it applies to both the tooltip and the popover component.

Try instead

window.$ = window.jQuery = require('jquery'); // <-- main, not 'slim'
window.Popper = require('popper.js');
require('bootstrap');

The "slim" jQuery dist excludes some features, necessary to register correctly tooltip as a jQuery plugin.