After migration to BS 5 this bee broken:

<script src=".6.0.js"></script>
<script src="/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
     $('[data-bs-toggle="tooltip"]').tooltip()
</script>

When this works normally:

<script src=".6.0.js"></script>
<script src="/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        (function () {
            $('[data-bs-toggle="tooltip"]').tooltip()
        })();
    });
</script>

This is absent in migration docs, and looks weird for me, so I'm asking : may be I'm doing something wrong and it is still possible to make plugins injected immediately as it was in BS4?

After migration to BS 5 this bee broken:

<script src="https://code.jquery./jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
     $('[data-bs-toggle="tooltip"]').tooltip()
</script>

When this works normally:

<script src="https://code.jquery./jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        (function () {
            $('[data-bs-toggle="tooltip"]').tooltip()
        })();
    });
</script>

This is absent in migration docs, and looks weird for me, so I'm asking : may be I'm doing something wrong and it is still possible to make plugins injected immediately as it was in BS4?

• javascript
• jquery
• twitter-bootstrap
• jquery-plugins
• bootstrap-5

Share Improve this question Follow edited Mar 4 at 18:16 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Jun 12, 2021 at 22:30 Roman PokrovskijRoman Pokrovskij 9,7942121 gold badges9797 silver badges153153 bronze badges 4

• You possibly had your scripts at the bottom of the body tag, previously to your changes... Because that ain't new from BS5. It is due to how jQuery looks up for DOM elements. Note that you can use the shorter $(document).ready(function(){...} too. – Louys Patrice Bessette Commented Jun 12, 2021 at 22:50
• @LouysPatriceBessette scripts are at the bottom still inside body... I have just doublechecked : BS4 works, BS5 doesn't ( $(...).tooltip is not a function ) . After hooking DOMContentLoaded, $(...).tooltip bee available . So this is new for BS 5. Or I miss something. – Roman Pokrovskij Commented Jun 12, 2021 at 23:12
• You were missing something in your BS4 version. Bootstrap remended enabling tooltips for BS-4 by using ‘$(function () { $('[data-toggle="tooltip"]').tooltip(); });’ (the way now of doing $(document).ready()). You were probably able to enable tooltips without jQuery’s ready function because BS-4’s JavaScript assigns all of the Bootstrap functions as it’s loaded (since jQuery is already loaded). For BS-5, the jQuery assignments wait for ‘DOMContentLoaded` event, so you have to use $(function… – Rich DeBourke Commented Jun 13, 2021 at 7:01
• @RichDeBourke May be you are right and such remendation for BS4 exists.. Still all other jquery not bs plugins are available exactly after <script> is placed. As I remember there were no such "jquery convention" that plugins bee available only after DOMContentLoaded.... – Roman Pokrovskij Commented Jun 13, 2021 at 7:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You’re correct that jQuery plugins bee available as soon as they’re loaded.

A jQuery plugin is created by extending the jQuery.prototype as in this example from Learn jQuery:

$.fn.greenify = function() {
    this.css( "color", "green" );
};

As soon as the function is assigned to the jQuery prototype, it’s ready to run, so, as long as the script is at the end, invoking the new jQuery function right away will work.

$( "a" ).greenify(); // Makes all the links green.

Bootstrap 4

For Bootstrap 4, since its JavaScript is loaded as a plugin right after jQuery is loaded, the Bootstrap jQuery functionality is available right away.

You can see the code from the tooltip module for Bootstrap 4.6.0 where it assigns the tooltip function to jQuery:

$.fn[NAME] = Tooltip._jQueryInterface
$.fn[NAME].Constructor = Tooltip
$.fn[NAME].noConflict = () => {
        $.fn[NAME] = JQUERY_NO_CONFLICT
        return Tooltip._jQueryInterface
    }

One caveat — for Version 4, Bootstrap did remend waiting for the DOM to be loaded.

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

Running the function right away works as it’s at the bottom of the page.

Bootstrap 5

Bootstrap 5 works differently. It creates a bootstrap JavaScript object that you can use right away (as soon as the script file is loaded). Putting the BS-5 code for enabling tooltips right after the BS-5 code will work:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
});

After Bootstrap defines the tooltip functionality, it calls a function to add the tooltip to jQuery:

defineJQueryPlugin(Tooltip)

The first thing that function does is check whether the document is still loading or not:

const defineJQueryPlugin = plugin => {
    onDOMContentLoaded(() => {
        const $ = getjQuery()
        if ($) {
            const name = plugin.NAME
            const JQUERY_NO_CONFLICT = $.fn[name]
            $.fn[name] = plugin.jQueryInterface
            $.fn[name].Constructor = plugin
            $.fn[name].noConflict = () => {
                $.fn[name] = JQUERY_NO_CONFLICT
                return plugin.jQueryInterface
            }
        }
    })
}

The function that checks whether the DOM is loaded or not is:

const onDOMContentLoaded = callback => {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', callback)
    } else {
        callback()
    }
}

If the DOM is still loading, an event listener for the DOMContentLoaded event is created and that listener runs the code to create the jQuery plugin after the DOM is loaded.

So, yes, jQuery plugins bee available as soon as they’re loaded, but Bootstrap is delaying the plugin assignments until after the DOMContentLoaded event. Why they’re doing that, I don’t know, but that’s how the code currently works.

I'm using Vite to include my assets like so:

// app.js
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery

import * as bootstrap from 'bootstrap'

But no matter how I imported the files, I couldn't get jQuery to be on the window before bootstrap loaded. Instead, I copied the code that Rich linked in his answer, and modified it to install the tooltip manually. This was the only that that worked for me. Hopefully summernote gets on the train of modern JS soon!

import jQuery from 'jquery'
import * as bootstrap from 'bootstrap'

const JQUERY_NO_CONFLICT = jQuery.fn['tooltip']
jQuery.fn['tooltip'] = bootstrap.Tooltip.jQueryInterface
jQuery.fn['tooltip'].Constructor = bootstrap.Tooltip
jQuery.fn['tooltip'].noConflict = () => {
    jQuery.fn['tooltip'] = JQUERY_NO_CONFLICT
    return bootstrap.Tooltip.jQueryInterface
}

window.$ = window.jQuery = jQuery