- var theme_customizer      = true;
- var popover_custom        = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Popover
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Popover
          // Container-fluid starts
          .container-fluid
            .row.popover-main
              .col-sm-12
                .card
                  .card-header
                    h4 Basic popover
                    p.f-m-light.mt-1 
                      | Use the
                      code  data-bs-toggle='popover'
                      | through popover above buttons. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.common-flex.popover-wrapper
                    button.btn.btn-primary.example-popover.mb-0.me-0(type='button', data-bs-toggle='popover', data-bs-placement='left', title='Basic Popover', data-bs-content="If the package restore doesn't help, you can look at the Output window in the Visual Studio.") Hurry Up! 
                    button.example-popover.btn.btn-success.mb-0.me-0(type='button', data-bs-trigger='hover', data-container='body', data-bs-toggle='popover', data-bs-placement='bottom', title='Hover Popover', data-offset='-20px -20px', data-bs-content=' Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.')
                      | Hover tooltip
                    a.btn.btn-lg.btn-secondary(tabindex='0' role='button' data-bs-toggle='popover' data-bs-trigger='focus', title='Dismissible popover', data-bs-title='Dismissible popover' data-bs-content="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered.") Dismissible popover
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#hover-variations', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#hover-variations
                            | &lt;!--You can use attribute (data-bs-toggle='popover') through make popover on buttons.--&gt;
                            | &lt;div class="card-body common-flex"&gt;
                            | &lt;button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" title="Basic Popover" data-bs-content="If the package restore doesn't help, you can look at the Output window in the Visual Studio."&gt;Hurry Up! &lt;/button&gt;
                            | &lt;button class="example-popover btn btn-success mb-0 me-0" type="button" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Hover Popover" data-offset="-20px -20px" data-bs-content=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building."&gt;Hover tooltip&lt;/button&gt;
                            | &lt;a class="btn btn-lg btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-title="Dismissible popover" data-bs-content="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered."&gt;Dismissible popover&lt;/a&gt;
              .col-sm-12
                .card
                  .card-header
                    h4 Popover direction
                    p.f-m-light.mt-1 
                      | Use the
                      code  data-bs-toggle='popover'
                      | through popover directions above buttons. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card 
                  .card-body.common-flex.popover-wrapper
                    button.example-popover.btn.btn-warning.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='top', title='Popover On Top', data-bs-content='Popovers need the tooltip plugin considering that a dependency.')
                      | Popover on top
                    button.example-popover.btn.btn-danger.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='right', title='Popover On Right', data-bs-content='Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.')
                      | Popover on right
                    button.example-popover.btn.btn-info.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='bottom', title='Popover On Bottom', data-bs-content='Identify container:to evade rendering problems in more complex components (like Bootstrap input groups, button groups, etc).')
                      | Popover on bottom
                    button.example-popover.btn.btn-dark.mb-0.me-0(type='button', data-container='body', data-bs-toggle='popover', data-bs-placement='left', title='Popover On Left', data-bs-content='Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.')
                      | Popover on left
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#direction-variations', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#direction-variations
                            | &lt;!--You can use attribute (data-bs-toggle='popover') through make popover on buttons(top/bottom/left/right).--&gt;
                            | &lt;button class="example-popover btn btn-warning mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover On Top" data-bs-content="Popovers need the tooltip plugin considering that a dependency."&gt;Popover on top&lt;/button&gt;
                            | &lt;button class="example-popover btn btn-danger mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="right" title="Popover On Right" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself."&gt;Popover on right&lt;/button&gt;
                            | &lt;button class="example-popover btn btn-info mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover On Bottom" data-bs-content="Identify container:to evade rendering problems in more complex components (like Bootstrap input groups, button groups, etc)."&gt;Popover on bottom&lt;/button&gt;
                            | &lt;button class="example-popover btn btn-dark mb-0 me-0" type="button" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Popover On Left" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself."&gt;Popover on left&lt;/button&gt;
              .col-sm-12
                .card
                  .card-header
                    h4 Popover offset 
                    p.f-m-light.mt-1 
                      | Use the
                      code  data-bs-offset="*,*"
                      |  through popover offset above buttons. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card 
                  .card-body.common-flex.popover-wrapper
                    button.btn.btn-secondary.mb-0.me-0(type='button' data-bs-offset="50,0" data-bs-toggle='popover' data-bs-delay-show='5000' title='Popover title' data-bs-content="And here's some amazing content. It's very engaging. Right?" data-kt-initialized="1")
                      | Popover offset 50
                    button.example-popover.btn.btn-dark.mb-0.me-0(type='button' data-bs-offset="-50,0" data-container='body', data-bs-toggle='popover', data-bs-placement='left', title='Popover On Left', data-bs-content='Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself.')
                      | Popover offset -50
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#offset-variations', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#offset-variations
                            | &lt;!--You can use data-bs-offset="" through set popover offset --&gt;
                            | &lt;button class="btn btn-secondary mb-0 me-0" type="button" data-bs-offset="50,0" data-bs-toggle="popover" data-bs-delay-show="5000" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-kt-initialized="1"&gt;Popover offset 50
                            | &lt;/button&gt;
                            | &lt;button class="example-popover btn btn-dark mb-0 me-0" type="button" data-bs-offset="-50,0" data-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Popover On Left" data-bs-content="Popovers are opt-in for effectiveness causes, in this way you have to initialize them yourself."&gt;Popover offset -50
                            | &lt;/button&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
