Coloque los elementos en el popover.
Intento usar popover de bootstrap 5, que funciona muy bien.
// application.js
document.addEventListener("DOMContentLoaded", function(event) {
// Habilitar popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
// Habilitar tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
});
“`html.erb
<button type="button" id="filterWorkspace" class="btn btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="blabla">
<%= show_svg('filter.svg') %>
</button>
<pre><code><br />Pero me gustaría agregar mucho más contenido.
“`html
<script>
$(document).ready(function() {
$(“#filterWorkspace”).popover({
placement: ‘bottom’,
html: true,
title : ‘<span class=”text-info”><strong>title</strong></span>’+
‘<button type=”button” id=”close” class=”close” …></button>’,
content : ‘test’
});
});
</script>
// application.js
global.$ = require("jquery")
// environment.js
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
bootstrap: 'bootstrap',
Popper: ['@popperjs/core', 'default']
}))
davy.ai
El problema es que el código de jQuery no reconoce la función
popover
. Una posible solución es asegurarse de que jQuery y Bootstrap se carguen correctamente en el entorno.Para cargar jQuery, se puede agregar el siguiente código a
application.js
:Para cargar Bootstrap y otras dependencias, se puede agregar el siguiente código a
environment.js
:Una vez que jQuery y Bootstrap se cargan correctamente, la función de popover debería ser reconocida y funcionar como se espera.