נא להמתין...
העמוד בטעינה

Popovers

BS4 theme popover is an enhancement of BS popover . Its main purpose is to set default options, change the default click trigger behaviour and add a close button in certain situations

Getting started

To use BS4 popover simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Bootstrap's popover should be manually initialized, but when using BS4 popover include in your bundle file BS4 popover initializer and it will initialize BS4 popover with pre defined custom options. 

//= require initializers/bs4-popover

You can use BS4 theme popover as described in BS popover

Default options

The following options override BS popover default options

Don't use animation!
When popover is manually shown (like in jquery.btn-spinner.js on ajax error) animation can cause problems due to popover's limitation to be shown before previous hide animation is over. 
html: true, // allow html content inside the popover
placement: 'auto', // position the popover automatically according to the page
trigger: 'hover', // trigger popover on hover (click in touch screen) unless specified otherwise
dismissOnBlur: true, // close popover when clicking outside of the popover (not relevant for hover trigger)
animation: false // don't use fade animation (in/out) when showing/hiding popover (THIS iS IMPORTANT)

HTML title & content

Inside the popover trigger element add a dom element with the class .popover-header or .popover-body (or both), the content of this element will be the popover's title or content respectively. Dont forget to add .d-none to this dom element.

Don't use buttons inside buttons!
If you are using a button to display the popover don't use buttons in the popover body because button inside button is bad! use links. 

=button_tag class: 'btn btn-light', 'data-toggle': "popover" do
  ='html title & content'
  .popover-header.d-none
    ="And here's some amazing"
    %i.far.fa-smile-wink
  .popover-body.d-none
    %strong.bg-primary.text-white.py-1.px-2.rounded='HTML'
    ="content. It's very engaging. Right?"

Dismiss on blur

  • When Popover is triggered by click / shown manually this option will define if the popover should be closed when clicking outside the popover (e.g body)
  • Clicking on the element that triggered the popover is not considered a click outside the popover hence will not close the popover
  • When popover is triggered by hover dismiss on blur isn't relevant cause the popover closes when hovering outside the triggering element
use a string value
when using 'data-dismiss-on-blur': 'false' please note that false must be a string 
.row
  .col-24.col-sm-auto
    =button_tag 'Dismiss on blur', class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "click", 'data-dismiss-on-blur': 'true', title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
  .col-24.col-sm-auto.mt-2.mt-sm-0
    =button_tag "Don't Dismiss on blur", class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "click", 'data-dismiss-on-blur': 'false', title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"

Popover container

Popover is not "contained" by default. Sometimes setting a container will help position popover if page changes.
e.g this page has a sidebar and a main part.
  • A popover that is not contained by anything will stay in the same position when the side bar is opening and closing (during the animation). It will update it's position only after the side bar finished transitioning due the manual call for updating all visible popover position.
  • A popover that is contained by main will move with the page
  • you can use .popover-container as a wrapper and all popovers nested in this wrapper will be contained by it.
Container must be relative
Since popover is positioned absolute it's container must have position set to relative
.popover-container boundaries
When using .popover-container, if not specified otherwise, the boundaries will be as .popover-container. If you need to override this just add [data-boundary=viewport] on the element.
open all 3 popovers and scroll up, you will see that only the one set with main as container and have no boundaries will follow 
.small.text-muted.mb-2
  open all 3 popovers and scroll up,
  you will see that only the one set with main as container and have no boundaries will follow

.row
  .col-24.col-md-auto
    =button_tag 'No container', class: 'btn btn-light', title: "Popover title",
                data: {toggle: "popover", trigger: "click", container: false, 'dismiss-on-blur': false, content: "And here's some amazing content. It's very engaging. Right?", placement: 'top'}
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag "Main as container", class: 'btn btn-light', title: "Popover title",
                data: {toggle: "popover", trigger: "click", container: 'main', 'dismiss-on-blur': false, content: "And here's some amazing content. It's very engaging. Right?", placement: 'top'}
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag "Main as container, viewport boundaries", class: 'btn btn-light', title: "Popover title",
                data: {toggle: "popover", trigger: "click", container: 'main', boundary: 'viewport', 'dismiss-on-blur': false, content: "And here's some amazing content. It's very engaging. Right?", placement: 'top'}

Dismissible popover

  • A dismissible popover will have an "x" button in the popover header and the class .popover-dismissible
  • Every popover is dismissible except the ones triggered by hover event
  • In touch devices all popovers will have an "x" button in the popover header (even the ones triggered by hover)
On touch device will be dismissible 
.row
  .col-24.col-md-auto
    =button_tag 'Dismissible popover', class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag 'Non dismissible popover', class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "hover", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
    %span.d-block.d-md-inline-block.mt-1.mt-md-0.ml-md-2.small.text-muted='On touch device will be dismissible'

Data dismiss

you can set [data-dismiss=popover] on a link / button inside a popover to dismiss it. 

=button_tag class: 'btn btn-light', data: {toggle: "popover", trigger: 'click'}, title: "Popover title" do
  ='popover with data-dismiss button'
  .popover-body.d-none
    =link_to 'click here to dismiss', 'javascript:;', class: 'btn btn-link', data: {dismiss: 'popover'}

Popover z-index

  • Popover and tooltip z-index is 1060 and 1070, they are both positioned above all dom elements except elements positioned in $zindex-god (1080).
  • We position navigation bars (#top-header) in $zindex-god so popover will be under it.
  • When modal is open modal header and footer are positioned in $zindex-god (navigation bars outside modal like #top-header loses $zindex-god when modal is opened)

You can check every popover in this page and see that it is positioned under the #top-header and above all the rest, in the next example you can also check how it behaves in a modal.

$zindex-dropdown: 1000
$zindex-sticky: 1020
$zindex-fixed: 1030
$zindex-modal-backdrop: 1040
$zindex-modal: 1050
$zindex-popover: 1060
$zindex-tooltip: 1070

$zindex-god: 1080

Popover & Modals

  • When a modal opens all visible popovers on the page will be hidden.
  • You can place popovers inside modal header, body or footer.
  • The popover's container will be the modal header, body or footer unless specified otherwise.
  • When placing popover inside the body The header and footer are positioned above it because they have $zindex-god.
Popover boundaries
The popover's default boundaries will be the .modal-body. Since the .modal-body boundaries are only the visible area of the .modal-body and the .modal-body itself can have a lot of scrollable content, the popover will try to stay inside the boundaries and effect is kind of weird. To avoid this effect, place inside the .modal-body a wrapper for its content - .popover-content, check the example below for more details 
.row
  .col-24.col-md-auto
    =button_tag 'modal without popover container', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#popover-modal-without-popover-container", type: 'button'
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag 'modal with popover container', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#popover-modal-with-popover-container", type: 'button'

.modal#popover-modal-with-popover-container{tabindex: '-1'}
  .modal-dialog
    %form.modal-content
      .modal-header
        %h5.modal-title
          ='Modal with popover'
          =button_tag 'popover', type: 'button', class: 'ml-2 btn btn-link', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
        =button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
          %span ×
      .modal-body
        .popover-container
          %p click on one of the buttons outside visible .modal-body (one of the bottom buttons) and scroll
          -40.times do
            .my-2
              =button_tag 'popover', type: 'button', class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
      .modal-footer
        .row.flex-fill
          .col
            =button_tag 'popover', type: 'button', class: 'btn-block btn btn-primary', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
          .col
            =button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"

.modal#popover-modal-without-popover-container{tabindex: '-1'}
  .modal-dialog
    %form.modal-content
      .modal-header
        %h5.modal-title
          ='Modal with popover'
          =button_tag 'popover', type: 'button', class: 'ml-2 btn btn-link', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
        =button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
          %span ×
      .modal-body
        %p click on one of the buttons outside visible .modal-body (one of the bottom buttons) and scroll
        -40.times do
          .my-2
            =button_tag 'popover', type: 'button', class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
      .modal-footer
        .row.flex-fill
          .col
            =button_tag 'popover', type: 'button', class: 'btn-block btn btn-primary', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
          .col
            =button_tag 'close', type: 'button', class: 'btn-block btn btn-secondary', 'data-dismiss': "modal"

Styles

BS4 theme popover includes several predefined custom styles, each serving its own semantic purpose. Each style has normal, *-light and *-lighter variant. To use a custom style add data-popover-class and popover-success, popover-danger, popover-primary etc... 

.row
  .col-24.col-md-auto
    =button_tag 'popover success', type: 'button', class: 'btn btn-light', 'data-toggle': "popover", 'data-popover-class': "popover-success", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag 'popover success light', type: 'button', class: 'btn btn-light', 'data-toggle': "popover", 'data-popover-class': "popover-success-light", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag 'popover success lighter', type: 'button', class: 'btn btn-light', 'data-toggle': "popover", 'data-popover-class': "popover-success-lighter", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"

RTL

BS4 theme popover fully supports RTL, not extra work needed!

.row{dir: 'rtl'}
  .col-24.col-md-auto
    =button_tag 'Regular Popover', class: 'btn btn-light', 'data-toggle': "popover", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
  .col-24.col-md-auto.mt-2.mt-md-0
    =button_tag 'Click Popover', class: 'btn btn-light', 'data-toggle': "popover", 'data-trigger': "click", title: "Popover title", 'data-content': "And here's some amazing content. It's very engaging. Right?"
On this page