- var tooltip               = true;
- var theme_customizer      = 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
                    | Tooltip
                .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 Tooltip
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12
                .card
                  .card-header
                    h4 Basic Tooltip
                    p.f-m-light.mt-1 
                      | Use the 
                      code data-bs-title
                      |  to change tooltip title and 
                      code data-bs-toggle
                      |  to add tooltip attribute.
                    .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
                    button.example-popover.btn.btn-primary.mb-0.me-0(type='button', data-container='body', data-bs-toggle='tooltip', data-bs-placement='top', title='Surprise!!! Thank you for hovering...')
                      | It's magic please hover me... 
                    h5.mb-1.py-4.pb-0 Inline Tooltip Content
                    p 
                      | Here, is some content about tooltips that you can set the
                      a.txt-primary.fw-bold(data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='tooltip' data-bs-original-title='popover text')   tooltip
                      |   inside the content with help of tooltip and also you can add
                      button.btn.btn-success.text-white.border-0.px-3.py-1.me-0.mb-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='button')
                        | button 
                      |  .Tooltips helps you to add more and more content. A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#tooltip', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#tooltip
                            | &lt;!--You can use attribute (data-bs-target='tooltip') to  used tooltips.--&gt;
                            | &lt;button class="example-popover btn btn-primary mb-0 me-0" type="button" data-container="body" data-bs-toggle="tooltip" data-bs-placement="top" title="Surprise!!! Thank you for hovering..."&gt;It's magic please hover me... &lt;/button&gt;
                            | &lt;h5 class="mb-1 py-4 pb-0"&gt;Inline Tooltip Content&lt;/h5&gt;
                            | &lt;p&gt;
                            |    Here, is some content about tooltips that you can set the&lt;a class="txt-primary fw-bold" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="tooltip" data-bs-original-title="popover text"&gt; tooltip&lt;/a&gt; inside the content with help of tooltip and also you can add
                            | &lt;button class="btn btn-success text-white border-0 px-3 py-1 me-0 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="button"&gt;button &lt;/button&gt; .Tooltips helps you to add more and more content. A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element
                            | &lt;/p&gt;
              .col-md-6
                .card
                  .card-header
                    h4 Colored Tooltip 
                    p.f-m-light.mt-1 
                      | Use the 
                      code btn- *
                      |  to change dark background color and 
                      code data-bs-placement='*' 
                      | to tooltip positions change.
                    .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.mb-0.me-0.btn.btn-primary(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='Primary')
                        | Primary
                      button.mb-0.me-0.btn.btn-secondary(type=' button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='Secondary')
                        | Secondary
                      button.mb-0.me-0.btn.btn-success(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='Success')
                        | Success
                      button.mb-0.me-0.btn.btn-warning.text-black(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='Warning')
                        | Warning
                      button.mb-0.me-0.btn.btn-danger(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-title='Danger')
                        | Danger
                      .code-box-copy
                          button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#colored-tooltip', title='Copy')
                            i.icofont.icofont-copy-alt
                          pre
                            code.language-html#colored-tooltip
                              | &lt;!--You can use attribute (data-bs-target='tooltip') to  used tooltips.--&gt;
                              | &lt;button class="mb-0 me-0 btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Primary"&gt;Primary&lt;/button&gt;
                              | &lt;button class="mb-0 me-0 btn btn-secondary" type=" button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Secondary"&gt;Secondary&lt;/button&gt;
                              | &lt;button class="mb-0 me-0 btn btn-success" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Success"&gt;Success&lt;/button&gt;
                              | &lt;button class="mb-0 me-0 btn btn-warning text-black" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Warning"&gt;Warning&lt;/button&gt;
                              | &lt;button class="mb-0 me-0 btn btn-danger" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Danger"&gt;Danger&lt;/button&gt;
              .col-md-6
                .card
                  .card-header
                    h4 Tooltip  Directions
                    p.f-m-light.mt-1 
                      | Use the 
                      code btn-*
                      |  to change dark background color and
                      code  data-bs-placement='*'
                      | [top/right/bottom/left] to tooltip direction change.
                    .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.mb-0.me-0(type='button', data-bs-toggle='tooltip', data-bs-placement='top', title='Tooltip on top')
                        | Tooltip on top
                      button.btn.btn-secondary.mb-0.me-0(type='button', data-bs-toggle='tooltip', data-bs-placement='right', title='Tooltip on right')
                        | Tooltip on right
                      button.btn.btn-success.mb-0.me-0(type='button', data-bs-toggle='tooltip', data-bs-placement='bottom', title='Tooltip on bottom')
                        | Tooltip on bottom
                      button.btn.btn-warning.mb-0.me-0(type='button', data-bs-toggle='tooltip', data-bs-placement='left', title='Tooltip on left')
                        | Tooltip on left
                      .code-box-copy
                            button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#dark-tooltip', title='Copy')
                              i.icofont.icofont-copy-alt
                            pre
                              code.language-html#dark-tooltip
                                | &lt;!--You can use attribute (data-bs-target='tooltip') to  used tooltips.--&gt;
                                | &lt;button class="btn btn-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"&gt;Tooltip on top&lt;/button&gt;
                                | &lt;button class="btn btn-secondary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"&gt;Tooltip on right&lt;/button&gt;
                                | &lt;button class="btn btn-success mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"&gt;Tooltip on bottom&lt;/button&gt;
                                | &lt;button class="btn btn-warning mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"&gt;Tooltip on left&lt;/button&gt;
              .col-md-6
                .card
                  .card-header
                    h4 HTML Elements With Hover Effect
                    p.f-m-light.mt-1 
                      | Use the 
                      code bg-*-light
                      |  to change light background color and 
                      code data-bs-title 
                      |  to the content under the HTML tag.
                    .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.bg-primary.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-html='true' data-bs-placement='top' data-bs-title='<em>Thank</em> <u>you</u>')
                        | Notifications Received
                      button.btn.bg-warning.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' data-bs-title='<b>Thank</b> <em>you</em>')
                        | Last Warning
                      button.btn.bg-danger.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' data-bs-title='<em>Thank</em> <u>you</u>')
                        | It's Danger
                      button.btn.bg-info.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' data-bs-title='<b>Thank</b> <em>you</em>')
                        | Coming soon
                      .code-box-copy
                            button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#hover-tooltip', title='Copy')
                              i.icofont.icofont-copy-alt
                            pre
                              code.language-html#hover-tooltip
                                | &lt;!--You can use attribute (data-bs-target='tooltip') to  used tooltips.--&gt;
                                | &lt;button class="btn bg-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-bs-title="&amp;lt;em&amp;gt;Thank&amp;lt;/em&amp;gt; &amp;lt;u&amp;gt;you&amp;lt;/u&amp;gt;"&gt;Notifications Received&lt;/button&gt;
                                | &lt;button class="btn bg-warning mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&amp;lt;b&amp;gt;Thank&amp;lt;/b&amp;gt; &amp;lt;em&amp;gt;you&amp;lt;/em&amp;gt;"&gt;Last Warning&lt;/button&gt;
                                | &lt;button class="btn bg-danger mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&amp;lt;em&amp;gt;Thank&amp;lt;/em&amp;gt; &amp;lt;u&amp;gt;you&amp;lt;/u&amp;gt;"&gt;It's Danger&lt;/button&gt;
                                | &lt;button class="btn bg-info mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&amp;lt;b&amp;gt;Thank&amp;lt;/b&amp;gt; &amp;lt;em&amp;gt;you&amp;lt;/em&amp;gt;"&gt;Coming soon&lt;/button&gt;
              .col-md-6
                .card
                  .card-header
                    h4 Filled Tooltip
                    p.f-m-light.mt-1 
                      | Tooltip in hover effect through fill dark color.
                      code [.btn-outline-*]
                      |. and 
                      code data-bs-title 
                      | to the content under the HTML Tag.
                    .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.fill-tooltip 
                    .common-flex
                      button.btn.btn-outline-primary.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-html='true' data-bs-placement='top' data-bs-title='Tooltip Primary')
                        | Tooltip Primary
                      button.btn.btn-outline-secondary.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' data-bs-title='Tooltip Secondary')
                        | Tooltip Secondary
                      button.btn.btn-outline-success.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' data-bs-title='Tooltip Success')
                        | Tooltip Success
                      button.btn.btn-outline-info.mb-0.me-0(type='button' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' data-bs-title='Tooltip Info')
                        | Tooltip Info
                      .code-box-copy
                            button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#filled-tooltip', title='Copy')
                              i.icofont.icofont-copy-alt
                            pre
                              code.language-html#filled-tooltip
                                | &lt;!--You can use attribute (data-bs-target='tooltip') to  used tooltips.--&gt;
                                | &lt;button class="btn btn-outline-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-bs-title="Tooltip Primary"&gt;Tooltip Primary&lt;/button&gt;
                                | &lt;button class="btn btn-outline-secondary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Secondary"&gt;Tooltip Secondary&lt;/button&gt;
                                | &lt;button class="btn btn-outline-success mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Success"&gt;Tooltip Success&lt;/button&gt;
                                | &lt;button class="btn btn-outline-info mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Info"&gt;Tooltip Info&lt;/button&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
