Open In App

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

Last Updated : 10 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
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: 



Similar Reads

How to use modal closing event in Twitter Bootstrap ?
Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that's customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap Modals are divided into three primary sections: header, body, and footer. Syntax: class | tabindex | role | aria-labelledby Approach: It shows the pop-up menu w
2 min read
How to create a bootstrap tooltip using jQuery ?
Tooltip is like a balloon or also a small screen tip that displays text descriptions to any object in a webpage. A tooltip is displayed when the user hovers over an object using the cursor. It is a very useful part of a website and now can be found in almost all websites including some web applications like Adobe Photoshop, Adobe Illustrator, and m
4 min read
How to use Tooltip on Social Media Icons in Bootstrap 5 ?
In Bootstrap, Tooltips can be added to the social media icons that can be displayed on the icon's hover. Tooltips enhance the user experience by offering quick hints, tips, or clarifications that help users understand the functionality of interface elements, navigate through a website or application more effectively, and reduce confusion. We can ac
2 min read
How to Automatically Close Alerts using Twitter Bootstrap ?
All modern web application uses alerts to show messages to the user. These alerts have a close button to close them or can be closed automatically using Twitter Bootstrap. In this post, we will create automatically closing of alerts using twitter Bootstrap. Basic idea is to use jQuery setTimeout() method to close the alert after specified time. Syn
3 min read
How to create forms using Twitter Bootstrap ?
Every website that you visit will have some sort of form in it to collect data from the users. A Form consists of input fields that allow the user to enter the data. Bootstrap provides us with a very easy way to add customizable &amp; responsive forms to our web pages. In this article, we will learn how to create forms using bootstrap 5. Bootstrap
5 min read
Twitter Like Character Count Validation using jQuery
In this article, we will create a web app that mimics the character count validation behavior of Twitter (X). When users start typing in a textarea, the number of characters and a progress bar will appear below the textarea. This basically displays the remaining character count as well as limiting the max length of input text, by using jQuery. [cap
3 min read
Create Twitter Login Page using Tailwind & jQuery
We will see How To Make a Twitter Login Page Using TailwindCSS and jQuery. The code produces an attractive login page with a design similar to the Twitter login interface. The jQuery incorporates straightforward validation for the email input field upon submitting the form. PrerequisitesHTMLTailwind CSSjQueryApproachThe HTML code outlines a basic l
2 min read
How to change the width and height of Twitter Bootstrap's tooltips?
Bootstrap tooltip: A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. Standardized bootstrap element collection like a small pop-up which appears whenever user performs any specific action click, hover(default), and focus on that element. It also supports manual trigger for specif
2 min read
How to Check Twitter Bootstrap is Loaded or not ?
Bootstrap is a very useful framework, which is offered by Twitter to make fully responsive websites. It provides CSS classes that are predefined and are usually meant to be directly used without any changes to it. To load Bootstrap into your website read this article Introduction and Installation. It is very important to understand why we need to c
2 min read
How to handle the modal closing event in Twitter Bootstrap?
Modal Closing Event in Twitter Bootstrap | Set 1 Prerequisite Knowledge: Bootstrap 4 | Modal Twitter Bootstrap’s modal class offer a few events that are fired at the standard Bootstrap modal class. Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that is customizable and responsive. They can be used to display alert popups, vide
3 min read