When setting up a brand new Rails 7 app with Bootstrap, I noticed that Modals work seamlessly, but Popovers lack the same functionality. How can I make Popovers work?
Rails 7.1.2, esbuild, Bootstrap 5.3.2:
rails new --database sqlite3 --javascript esbuild --css bootstrap bootstrap_test
cd bootstrap_test
bin/setup
rails g scaffold page
edit app/views/pages/index.html.erb #see below
bin/dev
#app/views/pages/index.html.erb
<h1 class="display-1">Hello Bootstrap</h1>
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4" id="exampleModalXlLabel">If you can see this...</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Modals are working 🎉
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXl">Modal test</button>
<br>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-title="If you can see this..." data-bs-content="Popovers are working 🎉">Popover test</button>
Based on information from Bootstrap documentation:
In order to use Popovers, you need to enable them manually for performance reasons.
I attempted to initialize them using the suggested code snippet but encountered a
ReferenceError: Can't find variable: bootstrapconsole.log('Loading popovers...')
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
I also experimented with initializing Popovers via Stimulus without success.
Could there be something obvious that I'm overlooking?