Popover

UiBibz::Ui::Core::Notifications::Popover

Documentation and examples for adding custom Bootstrap popovers with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 popover content, options, html_options 

 # or by block 
 popover options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • animation[Boolean]Apply a CSS fade transition to the popover<default: true>
  • boundary[String]Overflow constraint boundary of the popover
  • container[String/Element/Boolean]Delay showing and hiding the popover (ms) - does not apply to manual trigger type<default: false>
  • content[String]Default content value if data-bs-content attribute isn't present.
  • customClass[String]Add classes to the popover when it is shown
  • delai[Integer/Object]Appends the popover to a specific element<default: 0>
  • fallbackPlacement[Array]Allow to specify which position Popper will use on fallback<default: flip>
  • html[Boolean]Allow HTML in the popover.<default: false>
  • offset[Integer]Offset of the popover relative to its target<default: 0>
  • placement[String]Alias of position
  • popperConfig[Object]To change Bootstrap's default Popper config
  • position[String]How to position the popover - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the popover.<default: top>
  • selector[String/Boolean]If a selector is provided, popover objects will be delegated to the specified targets
  • template[String]Base HTML to use when creating the popover
  • title[String]Default title value if title attribute isn't present.
  • trigger[String]How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.<default: hover focus>

Note that for security reasons the sanitize, sanitizeFn, and allowList options cannot be supplied using data attributes.

Examples

Some examples explain how to use the options present in the component.

Options by Object

popover = UiBibz::Ui::Core::Notifications::Popover.new('My popover', position: :right)
ui_glyph "gem", popover: popover

<i data-bs-toggle="popover" data-bs-title="My popover" data-bs-placement="right" class="glyph fas fa-gem" data-bs-original-title="" title=""></i>

Options by Hash

ui_button "My button", popover: { content: 'My popover', title: 'My title' position: :top}, status: :primary

<button data-bs-toggle="popover" data-bs-title="My popover" data-bs-placement="right" class="btn-primary btn" data-bs-original-title="" title="">My button</button>

Options by String

To replace title notification by popover notification

My badge 
ui_badge "My badge", type: :pill, popover: 'My popover', status: :danger

<span data-bs-toggle="popover" data-bs-title="My popover" class="bg-danger badge rounded-pill" data-bs-original-title="" title="">My badge</span>