Open In App

Bootstrap 5 Tooltips

Last Updated : 17 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. To create a tooltip, we need to add the data-bs-toggle=”tooltip” attribute to an element with a title attribute to specify the text that will be displayed inside the tooltip.

Syntax:

<tag class="" data-bs-toggle="tooltip" 
         title="Message You Want To Display">
    Content
</tag>

The tooltip plugin generates content and markup on demand and by default places tooltips after their trigger element.

  • SASS: It is the short form of a Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. There are variables that can be used to manipulate the style of tooltips.
  • Usage: In usage, the tooltip plugin inserts tooltips after its trigger element. Also, it generates text and markup as needed.
    • Markup: The required markup is a type of data attribute.
      It includes a title on the HTML element. By default. It is set to the top by the plugin.
    • Disabled Elements: Disabled element is a tooltip element. This element doesn’t display data when the user focuses on, hovers over, or clicks the attribute.
    • Options: As the name says, options can be passed to elements with the help of data attributes or JavaScript.
    • Methods: There are lots of methods that can be used with tooltips to perform like the show, hide, toggle, etc.
    • Events: Below mentioned events can be used in tooltips.

Below example illustrates the Bootstrap 5 Tooltips:

Example  1: In this example, we will use a tooltip without bootstrap, you have to notice the position and style of the tooltip.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>Tooltips</strong>
        <br><br>
        <div>
            <a href="#" 
               type="button" 
               title="This is tooltip effect on Link!">
                Tooltip On Link !
            </a>
  
            <button href="#"
                    type="button"
                    title="This is tooltip effect on Button!">
                 Tooltip On Button !
            </button>
        </div>
      </center>
</body>
  
</html>


Output:

Bootstrap 5 Tooltips

Bootstrap 5 Tooltips

Example 2: In this example, we will demonstrate the Bootstrap 5 Tooltip.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
          rel="stylesheet">
    <script src=
    </script>
  
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Bootstrap 5 Tooltips</strong>
        <div class="container mt-2">
            <a href="#" type="button" 
               data-bs-toggle="tooltip" 
               title="This is tooltip effect on Link!">
                Tooltip On Link !
            </a>
  
            <button href="#" class="btn btn-success" 
                    type="button" data-bs-toggle="tooltip"
                    title="This is tooltip effect on Button!">
                 Tooltip On Button !
            </button>
        </div>
        <script>
            var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
            var tooltipList2 = tooltipList1.map(function(tooltipTriggerfun) {
                return new bootstrap.Tooltip(tooltipTriggerfun)
            })
        </script>
      </center>
</body>
  
</html>


Output: 

Bootstrap 5 Tooltips

Bootstrap 5 Tooltips

Reference: https://getbootstrap.com/docs/5.0/components/tooltips/



Previous Article
Next Article

Similar Reads

Bootstrap Tooltips
In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positioning. Hence, we need to include tether.min.js before
4 min read
Bootstrap 5 Enable Tooltips Everywhere
Bootstrap 5 Tooltips can be enabled everywhere by first creating a list of all the tooltips and then enabling each of them. All the tooltips have an attribute named "data-bs-toggle" set to "tooltip". This attribute can be used to select all the tooltips using the document.querySelectorAll() method. Bootstrap 5 Enable Tooltips Everywhere Classes: Th
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
Bootstrap 5 Tooltips Usage Disabled Elements
Bootstrap 5 Tooltips are a JavaScript plugin that allows you to add small, interactive, text-based hints to elements on your web page. They are displayed when the user hovers over, clicks on, or focuses on the element. Tooltips can be used to provide additional information about an element, such as a description, or to display a message when an ele
2 min read
Bootstrap 5 Tooltips getInstance() Method
Bootstrap Tooltips getInstance() Method is used to obtain the instance of tooltips while the tooltips are being used. This method can only work after the instance is pre-initialized. The tooltip instance linked to a DOM element may be obtained using this static function. Syntax: var tooltip-element = document.getElementById("tooltip-id"); var toolt
3 min read
Bootstrap 5 Tooltips Usage Methods
Bootstrap 5 Tooltips facilitates some pre-defined methods that we can use to trigger different types of functionalities in tooltips. The methods can be implemented using JavaScript and JQuery. Bootstrap 5 Tooltips Usage Methods: The Tooltips Methods with their function are given below: show(): The show() method can be used to show an element’s tool
4 min read
Bootstrap 5 Tooltips disable() Method
Bootstrap 5 Tooltips disable() method is used to remove a tooltip's ability to be visible, manually. After using this method, the user won't be able to see the tooltip at all. Syntax: tooltip.disable() Return Value: This method gives the tooltip the ability to be hidden. Let us understand more about this using some examples below: Example 1: In thi
2 min read
Bootstrap 5 Tooltips enable() Method
Bootstrap 5 Tooltips enable method. This method is used to enable a tooltip's ability to be shown. It is enabled by default. Syntax: tooltip.enable() Return Value: This method gives the tooltip the ability to be visible. Let us understand more about this using some examples below: Example 1: In this example, we will create Bootstrap 5 Tooltips and
2 min read
Bootstrap 5 Tooltips toggle() Method
Bootstrap 5 Tooltips toggle() method is used to toggle a tooltip's visibility manually. Calling it an odd number of times on a tooltip makes it visible, and calling it an even number of times makes it hidden. Syntax: tooltip.toggle() Return Value: The user receives a direct response from this method before the tooltip is ever displayed or hidden. E
2 min read
Bootstrap 5 Validation Tooltips
Bootstrap 5 Validation Tooltips are used to provide interactive textual hints to the user about the requirements to submit the form. Bootstrap 5 Validation Tooltips classes: valid|invalid-feedback: This class is used to tell the user about what things are necessary for the form to be submitted.valid|invalid-tooltip: This class is similar to the .{v
2 min read