logologo

Tooltip

Basic Tooltip

Use thedata-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 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="font-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>

Colored Tooltip

Use thebtn- * to change background color.

<!--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>

Tooltip directions

Use thedata-bs-placement=*to tooltip direction change.

<!--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>

HTML elements with click event

Use thedata-bs-title, data-bs-trigger="click" to the content under the HTML tag with click event.

<!--You can use attribute (data-bs-target='click') to  used tooltips.-->
<button class="btn btn-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-custom-class="custom-tooltip" data-bs-html="true" data-bs-placement="top" data-bs-title="< em >Thank</em> < u >you</ul>" data-bs-original-title="" title="" aria-describedby="tooltip348788">Notifications Received</button>
<button class="btn btn-warning mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-placement="top" data-bs-html="true" data-bs-title="< b >Thank</ b > < em >you</em>" data-bs-original-title="" title="" aria-describedby="tooltip851095">Last Warning</button>
<button class="btn btn-danger mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-placement="top" data-bs-html="true" data-bs-title="< em >Thank</em> < u >you</ul>" data-bs-original-title="" title="" aria-describedby="tooltip891699">It's Danger</button>
<button class="btn btn-info mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-placement="top" data-bs-html="true" data-bs-title="< b >Thank</ b > < em >you</em>" data-bs-original-title="" title="" aria-describedby="tooltip260145">Coming soon</button>

Filled Tooltip

Tooltip in hover effect through fill dark color.[.btn-outline-*] to button tag.

<!--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>

Wonky Tooltip

Use the.wonky-tooltip , .input-group"add animation to shake the tooltip.

Username must consist of "Number or special characters"
Minimum 8 characters password contains combination 
<!--You can use .wonky-tooltip , .input-group"', 'add animation to shake the tooltip.-->
< div class="input-group">
< input class="form-control" type="text" placeholder="Username" aria-label="Username">
< span class="input-group-text bg-primary">
< svg class="svg-w-20 svg-white">
< use href="../assets/svg/iconly-sprite.svg#Profile"></ use ></ svg >
< span class="tooltip bg-white default-border font-primary">Username must consist of "Number or special characters"</ span ></ span ></ div >
< div class="input-group">
< input class="form-control" type="text" placeholder="Password" aria-label="Password">
< span class="input-group-text bg-secondary">
< svg class="svg-w-20 svg-white">
< use href="../assets/svg/iconly-sprite.svg#Password"></ use ></ svg >
< span class="tooltip bg-white default-border font-secondary">Minimum 8 characters password contains combination</ span ></ span ></ div >

Image Tooltip

Use thedata-bs-title, data-bs-trigger="click" to the image with click event.

<!--You can use attribute (data-bs-trigger='click') to  used tooltips.-->
< li > < img src="../assets/images/social/1.png" alt="" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="Facebook !!"></ li >
< li > < img src="../assets/images/social/2.png" alt="" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="Instagram !!"></ li >
< li > < img src="../assets/images/social/3.png" alt="" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="Twitter !!"></ li >
< li > < img src="../assets/images/social/4.png" alt="" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="Youtube !!"></ li >