- var theme_customizer = true; - var counter = 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 button.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.") 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='#badge-variations', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#badge-variations | <!--You can use attribute (data-bs-toggle='popover') through make popover on buttons.--> | <div class="card-body common-flex"> | <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.">Hurry Up! </button> | <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.">Hover tooltip</button> | <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.">Dismissible popover</a> .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 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='#badge-variations', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#badge-variations | <!--You can use attribute (data-bs-toggle='popover') through make popover on buttons(top/bottom/left/right).--> | <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.">Popover on top</button> | <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.">Popover on right</button> | <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).">Popover on bottom</button> | <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.">Popover on left</button> .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 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='#badge-variations', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#badge-variations | <!--You can use badge-* class through change the colors of badges (primary/secondary/success...).--> | <span class="badge badge-primary">Primary</span> | <span class="badge badge-secondary">Secondary</span> | <span class="badge badge-success">Success</span> | <span class="badge badge-info">Info</span> | <span class="badge badge-warning text-dark">Warning</span> | <span class="badge badge-danger">Danger</span> | <span class="badge badge-light text-dark">Light</span> | <span class="badge badge-dark tag-pills-sm-mb">Dark</span> // Container-fluid Ends include ../../components/footer include ../../components/footer-files