Additional margin-top applied to popovers and accordions

[markschat]

I tried to use the popover component of bootstrap 5 and recognized, that the styles are off:

The default margin (h3 -> 1.5em) is applied to the popovers-heading causing an ugly whitespace obove the heading. This is not the intended bootstrap styling, instead the margin should be reset to 0 by the styles provided in _reboot.scss. At least that is what I see when inspecting the popover element contained in the bootstrap-docs.

As I am only able to see the minified css version from my shiny app I can´t figure out the exact reason why this happens. It seems to me that the styles are loaded in an unexpected order so that the default h3-style overrides the popover-styles (at least the margin-reset from _reboot.scss).

Reproducible Code Example:

library(shiny)
library(bslib)
library(htmltools)

init_popover <- "$(window).on('load', function(){$('[data-bs-toggle=\"popover\"]').popover({html: true})});"

ui <- fluidPage(
  theme = bslib::bs_theme(5),
  
  # initiate popover ----
  tags$head(tags$script(init_popover)),
  
  # use popover ----
  tags$button(
    type = "button", 
    class = "btn btn-primary m-5", 
    "data-bs-toggle" = "popover", 
    title = "Popover-Title", 
    "data-bs-content" = "Popover-Content",
    "Button"
  )
)
server <- function(input, output, session) {}

shinyApp(ui, server)

[cpsievert]

Thanks for the report! For a temporary workaround, you can do:

bslib::bs_theme(5) %>%
    bslib::bs_add_rules(".popover-header { margin-top: 0}")

For posterity, I believe this is also a problem for accordions with h2.accordion-header, as used in the examples https://getbootstrap.com/docs/5.0/components/accordion/

[mubashirqasim]

Excellent library but a little bit hard to implement some of the components like popovers, tooltips and modals. I wonder if it is possible to add some handy functions such as:

library(bsplus)
bs_button("A button") %>%
  bs_embed_popover(title = "I'm a popover", content = "Really!")

[github-actions[bot]]

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.