Tooltip

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

Basic tooltip

Use the data-bs-title 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 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 

<!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
<button class="example-popover btn btn-primary" 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-warning 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>

Colored tooltip

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

<!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
<button class="btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Primary">Primary</button>
<button class="btn btn-secondary" type=" button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Secondary">Secondary</button>
<button class="btn btn-success" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Success">Success</button>
<button class="btn btn-warning text-black" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Warning">Warning</button>
<button class="btn btn-danger" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Danger">Danger</button>

Tooltip directions

Use the btn-* to change dark background color and data-bs-placement='*'[top/right/bottom/left] to tooltip direction change.

<!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
<button class="btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
<button class="btn btn-success" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button class="btn btn-warning" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>

HTML elements with hover effect

Use the bg-*-light to change light background color and data-bs-title to the content under the HTML tag.

<!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
<button class="btn bg-primary" 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" 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" 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" 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>

Filled tooltip

Tooltip in hover effect through fill dark color.[.btn-outline-*] and data-bs-title to the content under the HTML Tag.

<!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
<button class="btn btn-outline-primary" 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" 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" 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" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Info">Tooltip Info</button>