How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
The Bootstrap Tooltip gives us a hint about the specific element in a graphical manner. Tooltip is used for performance reasons so it can be customized as per the requirement domain. Tooltip is implemented using javascript, it relies on a 3rd party library known as popper.js for positioning purposes.
It works on the concept of hover-over using the cursor pointer when the pointer hovers on the element a hint may pop/arise in any 4 directions (left, right, up, and down) as directed in the code.
Some general examples:
- In a SignIn Page, the Password tooltip pops the requirement such as it should be 8 characters long, start with Capital letter, etc.
- For the name it may pop that only first name and no the middle or last name has to be typed.
The Snippet of JavaScript
// Write Javascript code here
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})Note: HTML, CSS, Bootstrap, JavaScript and jQuery is used.
- Method 1: The below implementation is done for 4 buttons left, right, up and down and there respective tooltips which indicate the position of the buttons respectively when the cursor hovers over the buttons.
- Method 2: The Below Implementation is a Sign-up page with tooltips for giving tips/ recommendation. The form tag in the HTML is used to create a form and the tooltip attributes are added accordingly.
<!DOCTYPE html><html><head><title>Bootstrap Grid</title><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href=<!-- Optional theme --><linkrel="stylesheet"href=<scriptsrc=</script><!-- Latest compiled and minified JavaScript --><scriptsrc=</script><scripttype="text/javascript">$(document).ready(function() {$('#name').tooltip({'trigger': 'focus','title': 'Name is Required'});$('#email').tooltip({'trigger': 'focus','title': 'Email is Required'});$('#password').tooltip({'trigger': 'focus','title': "Password is Required"});});</script><style>.serif {font-family: "Times New Roman", Times, serif;}p {padding: 20px;}</style></head><body><h1><pclass="serif">Sign Up Sample Page</p></h1><divclass="container"style="padding:50px;"><formrole="form"><divclass="form-group"><labelfor="firstname">Name</label><inputtype="text"name="Name"class="form-control"id="name"placeholder="Enter Name"></div><divclass="form-group"><labelfor="email">Email</label><inputtype="text"name="email"class="form-control"id="email"placeholder="Enter email"></div><divclass="form-group"><labelfor="Password">Password</label><inputtype="password"name="password"class="form-control"id="password"placeholder="Enter Password"></div></form></div></body></html>Output:
<!DOCTYPE html><html> <head> <meta name="viewport" content= "width=device-width,initial-scale=1.0" /> <title> HTML with twitter Bootstrap tooltip using jQuery </title> <link rel="stylesheet" href= integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src= </script> <script src= integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"> </script> <script type="text/javascript"> $(document).ready(function() { $("#toptip").tooltip({ placement: "top" }); $("#bottomtip").tooltip({ placement: "bottom" }); $("#lefttip").tooltip({ placement: "left" }); $("#righttip").tooltip({ placement: "right" }); }); </script></head> <body> <center> <div class="container"> <h1><u>Bootstrap Tooltip Demo</u></h1> <br/><br/> <div> <button type="button" id="toptip" class="btn btn-danger" title="A Tooltip with Top placement"> Top Tooltip demo </button> <br><br> <button type="button" id="bottomtip" class="btn btn-info" title="A Tooltip with Bottom placement"> Bottom Tooltip demo </button> <br><br> <button type="button" id="lefttip" class="btn btn-success" title="A Tooltip with Left placement"> Left Tooltip demo </button> <br><br> <button type="button" id="righttip" class="btn btn-warning" title="A Tooltip with Right placement"> Right Tooltip demo </button> </div></body> </html> |
Output:
Please Login to comment...