Tooltip | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Tooltip

##### Basic Tooltip

Use `data-tooltip` to change tooltip title and `data-bs-toggle` to add tooltip attribute.

##### Inline Tooltip Content

Here, is some content about tooltips that you can set the tooltipinside the content with help of tooltip and also you can add
.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

    <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 class="mb-0 c-o-light">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-tooltip="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-tooltip="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>

##### Colored Tooltip

Use `btn-*` to change dark background color and `data-bs-placement='*'` to tooltip positions change.

    <button class="mb-0 me-0 btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Primary">Primary</button>
    <button class="mb-0 me-0 btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Secondary">Secondary</button>
    <button class="mb-0 me-0 btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Warning">Warning</button>
    <button class="mb-0 me-0 btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Success">Success</button>
    <button class="mb-0 me-0 btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Danger">Danger</button>
    <button class="mb-0 me-0 btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="info">Info</button>

##### Light Tooltips

Use `button-light-*` to change light background color and `data-bs-placement='*'` to tooltip positions change.

    <button class="mb-0 me-0 btn button-light-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Primary">Primary</button>
    <button class="mb-0 me-0 btn button-light-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Secondary">Secondary</button>
    <button class="mb-0 me-0 btn button-light-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Warning">Warning</button>
    <button class="mb-0 me-0 btn button-light-success" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Success">Success</button>
    <button class="mb-0 me-0 btn button-light-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Danger">Danger</button>
    <button class="mb-0 me-0 btn button-light-info" data-bs-toggle="tooltip" data-bs-placement="top" data-tooltip="Info">Info</button>

##### HTML Elements with Hover Effect

Use `data-bs-html='true'` to change HTML title and `data-tooltip` to the content under the HTML tag.

    <button class="btn bg-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-tooltip="<em>Thank</em> <u>you</u>">Notifications</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-tooltip="<b>Thank</b> <em>you</em>">Alert</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-tooltip="<em>Thank</em> <u>you</u>">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-tooltip="<b>Thank</b> <em>you</em>">Coming soon</button>

##### Outlined Tooltip

Hover effect through fill dark color and `btn-outline-*` and `data-tooltip` attribute to the content under the HTML Tag.

    <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-tooltip="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-tooltip="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-tooltip="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-tooltip="Tooltip Info">Tooltip Info</button>

##### Disabled Tooltip

Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). ideally made keyboard-focusable using `tabindex="0"`.

    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-tooltip="Disabled tooltip">
     <button class="btn btn-primary" type="button" disabled="">Disabled button</button>
    </span>

##### SVG's Tooltip

Use`bg-light-*` to change light background color and `stroke-*` to change SVG colors.

    <div class="common-flex">
     <div class="bg-light-info" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-tooltip="Notification">
       <svg class="stroke-info">
         <use href="../assets/svg/icon-sprite.svg#email-box"></use>
       </svg>
     </div>
     <div class="bg-light-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-tooltip="Like">
       <svg class="stroke-danger">
         <use href="../assets/svg/icon-sprite.svg#stroke-bookmark"></use>
       </svg>
     </div>
     <div class="bg-light-dark" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-tooltip="Comment">
       <svg class="stroke-dark">
         <use href="../assets/svg/icon-sprite.svg#stroke-msg"></use>
       </svg>
     </div>
     <div class="bg-light-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-tooltip="Share">
       <svg class="stroke-primary">
         <use href="../assets/svg/icon-sprite.svg#stroke-button"></use>
       </svg>
     </div>
    </div>

##### Icons Tooltip

Use `btn-outline-*` class to alter the outline's color, and you can position the tooltip in any swing.

    <div class="common-flex">
     <div class="btn-outline-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-tooltip="Notification">
       <i class="icofont icofont-envelope"></i>
     </div>
     <div class="btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-tooltip="Message">
       <i class="icofont icofont-ui-text-loading"></i>
     </div>
     <div class="btn-outline-dark" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-tooltip="Send">
       <i class="icofont icofont-location-arrow"></i>
     </div>
     <div class="btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-tooltip="Like">
       <i class="icofont icofont-heart-alt"></i>
     </div>
    </div>