How to use complex HTML with twitter Bootstrap tooltip using jQuery ?

Last Updated : 10 Apr, 2023

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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        integrity=
"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
        
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>

    <!-- Latest compiled and minified JavaScript -->
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
    </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>