Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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: 



Last Updated : 10 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads