270 lines
18 KiB
Plaintext
270 lines
18 KiB
Plaintext
- 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
|
|
| <!--You can use attribute (data-bs-target='tooltip') to used tooltips.-->
|
|
| <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...">It's magic please hover me... </button>
|
|
| <h5 class="mb-1 py-4 pb-0">Inline Tooltip Content</h5>
|
|
| <p>
|
|
| Here, is some content about tooltips that you can set the<a class="txt-primary fw-bold" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="tooltip" data-bs-original-title="popover text"> tooltip</a> inside the content with help of tooltip and also you can add
|
|
| <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">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
|
|
| </p>
|
|
.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
|
|
| <!--You can use attribute (data-bs-target='tooltip') to used tooltips.-->
|
|
| <button class="mb-0 me-0 btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Primary">Primary</button>
|
|
| <button class="mb-0 me-0 btn btn-secondary" type=" button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Secondary">Secondary</button>
|
|
| <button class="mb-0 me-0 btn btn-success" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Success">Success</button>
|
|
| <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">Warning</button>
|
|
| <button class="mb-0 me-0 btn btn-danger" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Danger">Danger</button>
|
|
.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
|
|
| <!--You can use attribute (data-bs-target='tooltip') to used tooltips.-->
|
|
| <button class="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>
|
|
| <button class="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>
|
|
| <button class="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>
|
|
| <button class="btn btn-warning mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
|
|
.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
|
|
| <!--You can use attribute (data-bs-target='tooltip') to used tooltips.-->
|
|
| <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="&lt;em&gt;Thank&lt;/em&gt; &lt;u&gt;you&lt;/u&gt;">Notifications Received</button>
|
|
| <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="&lt;b&gt;Thank&lt;/b&gt; &lt;em&gt;you&lt;/em&gt;">Last Warning</button>
|
|
| <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="&lt;em&gt;Thank&lt;/em&gt; &lt;u&gt;you&lt;/u&gt;">It's Danger</button>
|
|
| <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="&lt;b&gt;Thank&lt;/b&gt; &lt;em&gt;you&lt;/em&gt;">Coming soon</button>
|
|
.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
|
|
| <!--You can use attribute (data-bs-target='tooltip') to used tooltips.-->
|
|
| <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">Tooltip Primary</button>
|
|
| <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">Tooltip Secondary</button>
|
|
| <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">Tooltip Success</button>
|
|
| <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">Tooltip Info</button>
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|