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 their respective tooltips which indicate the position of the buttons respectively when the cursor hovers over the buttons.
html
<!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:
- 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.
html
<!DOCTYPE html><html><head> <title>Bootstrap Grid</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href= <!-- Optional theme --> <link rel="stylesheet" href= <script src= </script> <!-- Latest compiled and minified JavaScript --> <script src= </script> <script type="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><p class="serif">Sign Up Sample Page</p></h1> <div class="container" style="padding:50px;"> <form role="form"> <div class="form-group"> <label for="firstname">Name</label> <input type="text" name="Name" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" name="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="Password">Password</label> <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password"> </div> </form> </div></body></html> |
Output:
Please Login to comment...