Skip to content

Commit a9a2cdc

Browse files
committed
minor #17564 Fix/bootstrap turbo docs (Kerrialn)
This PR was submitted for the 6.2 branch but it was squashed and merged into the 5.4 branch instead. Discussion ---------- Fix/bootstrap turbo docs Add a note and code example in the "Using Bootstrap CSS & JS" docs. If a user is using Turbo Drive with bootstrap to wrap their javascript in a `turbo:load` event listener. Commits ------- 771dac3 Fix/bootstrap turbo docs
2 parents 7017e75 + 771dac3 commit a9a2cdc

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

frontend/encore/bootstrap.rst

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,25 @@ Now, require bootstrap from any of your JavaScript files:
7373
$('[data-toggle="popover"]').popover();
7474
});
7575
76+
Using Bootstrap with Turbo
77+
---------------------------
78+
79+
If you are using bootstrap with Turbo Drive, to allow your JavaScript to load on each page change,
80+
wrap the initialization in a ``turbo:load`` event listener:
81+
82+
.. code-block:: javascript
83+
84+
// app.js
85+
86+
// this waits for Turbo Drive to load
87+
document.addEventListener('turbo:load', function (e) {
88+
// this enables bootstrap tooltips globally
89+
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
90+
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
91+
return new Tooltip(tooltipTriggerEl)
92+
});
93+
});
94+
7695
Using other Bootstrap / jQuery Plugins
7796
--------------------------------------
7897

0 commit comments

Comments
 (0)