+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Tooltip Plug-in Video


The Tooltip Plug-in

The Tooltip plug-in is small pop-up box that appears when the user moves the mouse pointer over an element:
The Tooltip Plug-in

How To Create a Tooltip

First we need to have with us 3 JavaScript files i.e. "bootstrap.js" or "bootstrap.min.js" and “jquery.min.js”. To create a tooltip, add the data-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip: < a href="#" data-toggle="tooltip" title="Hooray!" >Hover over me< /a >
How To Create a Tooltip

Positioning Tooltips

By default, the tooltip will appear on top of the element. We can use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element e.g. < a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!" >Hover< /a >
Positioning Tooltips

< a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!" >Hover< /a >
Positioning Tooltips

< a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!" >Hover< /a >
Positioning Tooltips

< a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover< /a >
Positioning Tooltips



Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.
FOLLOW US