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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.