• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Tooltip

  2. Ui Kits
  3. Tooltip

Basic Tooltip

Use data-bs-toggle="tooltip" to set the tooltip.

Inline Tooltip Content

Here, is some content about tooltips that you can set the tooltip inside 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 

<div class="card-body">
<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="text-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>
</div>

Colored Tooltip

Add btn- * class to set the colored tooltip.

<div class="common-flex">
<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-white" 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>
</div>

Tooltip Directions

To set different direction use data-bs-placement="top/right/bottom/left".

<div class="common-flex">
<button class="btn btn-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top Tooltip</button>
<button class="btn btn-secondary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right Tooltip</button>
<button class="btn btn-success mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom Tooltip</button>
<button class="btn btn-warning mb-0 me-0 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left Tooltip</button>
</div>

HTML Elements With Tooltip

Use html element with the help of data-bs-title="".

<div class="common-flex tooltip-effect">
<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 text-white" 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>
</div>

Filled Tooltip

Fill the btn on the hover effect with the help of .btn-outline class.

<div class="common-flex">
<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>
</div>