extends ../../_layout/default.pug

block scripts
  // Plugins and scripts required by this view
  script(src='js/popovers.js')

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/popovers/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Base'},
      'Popovers'
    ],
  )

block view
  +docs-components('https://coreui.io/docs/components/popovers/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Popover
          span.small.ms-1 Basic example
        .card-body
          +example('https://coreui.io/docs/components/popovers/#example')
            button.btn.btn-lg.btn-danger(type='button' data-coreui-toggle='popover' title='' data-coreui-content="And here's some amazing content. It's very engaging. Right?" data-coreui-original-title='Popover title') Click to toggle popover
        
    .col-12
      .card.mb-4
        .card-header
          strong Popover
          span.small.ms-1 Four directions
        .card-body
          p.text-body-secondary.small
            | Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
          +example('https://coreui.io/docs/components/popovers/#four-directions')
            button.btn.btn-secondary(type='button' data-coreui-container='body' data-coreui-toggle='popover' data-coreui-placement='top' data-coreui-content='Top popover' data-coreui-original-title='' title='')
              | Popover on top
            button.btn.btn-secondary(type='button' data-coreui-container='body' data-coreui-toggle='popover' data-coreui-placement='right' data-coreui-content='Right popover' data-coreui-original-title='' title='')
              | Popover on right
            button.btn.btn-secondary(type='button' data-coreui-container='body' data-coreui-toggle='popover' data-coreui-placement='bottom' data-coreui-content='Bottom popover' data-coreui-original-title='' title='')
              | Popover on bottom
            button.btn.btn-secondary(type='button' data-coreui-container='body' data-coreui-toggle='popover' data-coreui-placement='left' data-coreui-content='Left popover' data-coreui-original-title='' title='')
              | Popover on left
    .col-12
      .card.mb-4
        .card-header
          strong Popover
          span.small.ms-1 Dismiss on next click
        .card-body
          p.text-body-secondary.small
            | Use the 
            code focus
            |  trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
          +example('https://coreui.io/docs/components/popovers/#dismiss-on-next-click')
            a.btn.btn-lg.btn-danger(tabindex='0' role='button' data-coreui-toggle='popover' data-coreui-trigger='focus' title='' data-coreui-content="And here's some amazing content. It's very engaging. Right?" data-coreui-original-title='Dismissible popover') Dismissible popover
        .col-12
      .card.mb-4
        .card-header
          strong Popover
          span.small.ms-1 Disabled elements
        .card-body
          p.text-body-secondary.small
            | Elements with the 
            code disabled
            |  attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper 
            code 
              = '<div>'
            |  or 
            code 
              = '<span>'
            | , ideally made keyboard-focusable using 
            code tabindex="0"
            | .
          p.text-body-secondary.small
            | For disabled popover triggers, you may also prefer 
            code data-coreui-trigger="hover focus"
            |  so that the popover appears as immediate visual feedback to your users as they may not expect to 
            em click
            |  on a disabled element.
          +example('https://coreui.io/docs/components/popovers/#disabled-elements')
            span.d-inline-block(tabindex='0' data-coreui-toggle='popover' data-coreui-trigger='hover focus' data-coreui-content='Disabled popover' data-coreui-original-title='' title='')
              button.btn.btn-primary(type='button' disabled='') Disabled button