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']
}))