InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
What is a Tooltip component in Bootstrap? |
|
Answer» You may have seen a small pop-up box appearing when the user hovers over an element. The same box is what we can add using the Tooltip component in Bootstrap. Use the data-toggle="tooltip" attribute to create a tooltip in Bootstrap. To work with tooltips, you need to initialize them with jQuery. You can also position the tooltip using the data-placement attribute. Let us now see an example that creates a tooltip: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <BODY> <div class="container-fluid"> <h3>Tooltip Example</h3> <a href="#" data-toggle="tooltip" data-placement="right" title="This is a tooltip!">Keep mouse cursor here</a> <p>Above is a tooltip on the right</p><BR> </div> <script> $(document).ready(FUNCTION(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html>Here is the output. We have used the title attribute for text to be displayed inside the tooltip. The tooltip is on the right: For positioning tooltip on left, top and bottom, use the following values for data-placement attribute: <div class="container-fluid"> <a href="#" data-toggle="tooltip" data-placement="left" title="This is a tooltip!">Keep mouse cursor here</a> <a href="#" data-toggle="tooltip" data-placement="top" title="This is a tooltip!">Keep mouse cursor here</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip!">Keep mouse cursor here</a> </div> |
|