- var page_Title = 'Popover';
- var popover_custom        = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Popover
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    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
              .grid.grid-cols-12.card-gap.popover-main
                div(class="col-span-12")
                  .card
                    .card-header
                      h5 Basic Popover
                      p.f-m-light.mt-1 
                        | Use common class 
                        code data-bs-toggle='popover' 
                        | and hover to use the 
                        code data-bs-trigger='hover'
                        | attributes.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.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.text-white(type='button', data-bs-toggle='popover', data-bs-placement='left', title='Popover Title', data-bs-content="And here's some amazing content. It's very engaging. Right?") Hurry Up! 
                      button.example-popover.btn.btn-success.mb-0.me-0.text-white(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
                      .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#hover-variations', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar
                            code.language-html#hover-variations
                              |&lt;button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" data-bs-placement="left" title="Popover Title" data-bs-content="And here's some amazing content. It's very engaging. Right?"&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;               
                div(class="col-span-4 lg:col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 Disabled Elements
                      p.f-m-light.mt-1 
                        | Use
                        code  data-bs-toggle="*"
                        |  to set disabled popover. 
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.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
                      span.d-inline-block(tabindex='0' data-bs-toggle='popover' data-bs-trigger='hover focus', title='Disable Popover Title', data-bs-content="And here's some amazing content. It's very engaging. Right?")
                        button.btn.btn-primary.text-white(type='button' disabled='') Disabled Button
                      .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#disable-popover', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar
                            code.language-html#disable-popover
                              |&lt;div class="card-body common-flex popover-wrapper"&gt;
                              |  &lt;span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" title="Disable Popover Title" data-bs-content="And here's some amazing content. It's very engaging. Right?"&gt;
                              |      &lt;button class="btn btn-primary" type="button" disabled=""&gt;Disabled Button&lt;/button&gt;
                              |  &lt;/span&gt;
                              |&lt;/div&gt;
                div(class="col-span-4 lg:col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 Delay Popover
                      p.f-m-light.mt-1 
                        | Use
                        code  data-bs-delay="{value}"
                        |  to set delay popover.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.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.text-white(type='button', data-bs-toggle='popover', data-bs-placement='right', title='Popover Title', data-bs-delay='{"show":1500,"hide":1800}', data-bs-content="And here's some amazing content. It's very engaging. Right?") Delay Popover
                      .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#delay-popover', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar
                            code.language-html#delay-popover
                              |&lt;button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-delay="{&quot;show&quot;:1500,&quot;hide&quot;:1800}" data-bs-content="And here's some amazing content. It's very engaging. Right?"&gt;Delay Popover&lt;/button&gt;
                div(class="col-span-4 lg:col-span-12")
                  .card
                    .card-header
                      h5 Dismiss Popover
                      p.f-m-light.mt-1 
                        | Use
                        code  data-bs-dismiss='*'
                        |  to set dismiss popover.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-
                          li
                            i.icofont.icofont-error.close-card 
                    .card-body.common-flex.popover-wrapper
                      a.btn.btn-danger.popover-dismiss.text-white(tabindex='0' role='button' data-bs-toggle='popover' data-bs-trigger='focus', title='Dismissible Popover', data-tooltip='Dismissible Popover', data-bs-dismiss='true', data-bs-content="And here's some amazing content. It's very engaging. Right?") Dismissible Popover
                      .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#dismiss-popover', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre.custom-scrollbar
                            code.language-html#dismiss-popover
                              |&lt;a class="btn btn-danger popover-dismiss" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible Popover" data-tooltip="Dismissible Popover" data-bs-dismiss="true" data-bs-content="And here's some amazing content. It's very engaging. Right?"&gt;Dismissible Popover&lt;/a&gt;     
                div(class="col-span-12")
                  .card
                    .card-header
                      h5 Popover Offsets 
                      p.f-m-light.mt-1 
                        | Use
                        code  data-bs-offset="*,*"
                        |  through set popover offset. 
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.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.text-white(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.text-white(type='button' data-bs-offset="-50,0" data-container='body', data-bs-toggle='popover', data-bs-placement='left', title='Popover Title', 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.custom-scrollbar
                          code.language-html#offset-variations
                            |&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 Title" 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;
        include ../../components/footer
    include ../../components/footer-files