Bootstrap 5 Tooltip

When a user hovers their mouse pointer over an element, a little pop-up box is called a tooltip function. Bootstrap 5 tooltip shows extra information or a short message after placing the mouse on a particular function.

Bootstrap 5 Tooltip Rules

Bootstrap 5 uses a third-party package for placement in tooltips. The tooltips do not function until we use the "bootstrap.bundle.min.js" or "bootstrap.bundle.js" library on the web page. The JavaScript bundle library or the link includes before bootstrap.js link.

We must initialize tooltips ourselves because they are opt-in for performance reasons. The "Zero-length" tooltip titles are never shown on the web page.

Tooltips are center-positioned when they are activated by hyperlinks that cross multiple lines. On hidden elements, tooltips cannot be triggered. A wrapper element must be activated to display tooltips for disabled elements.

The tooltip must be disabled before their related elements are deleted from the DOM (Document Object Model). An element inside a shadow document object model can be used to initiate tooltips.

How to operate the tooltip

Create HTML user's interactive functions like buttons, anchors, and others.
Use data-bs-toggle = "tooltip" tag in the element.

Write title = "Thank You!" of the tooltip inside the button or anchor tag.

<a href = "#" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" >
    Hover Here!
  </a>

Use JavaScript function for initializing bootstrap 5 tooltip functions.

<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
  return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>

Basic Tooltip with Anchor Tag

The tooltip function uses different user-friendly tags and elements. Here, we use anchor <a> tag with tooltip toggle element and its title. In script tag, the tooltip variable initializes the function after hover on <a> tag.

Example

The following example shows tooltip data after hovering the anchor tag.

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with Anchor Tag </h5>
<a href = "#" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</a>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

Output

The following image shows a basic tooltip with an anchor tag.

Basic Tooltip with Button Function

Mostly, the tooltip function uses a button function with html element. Here, we use a button tag with a tooltip toggle element and its title. In the script tag, the tooltip variable and function initialize the function after hovering on the button tag.

Example

The following example shows tooltip data after the hover button function.

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with Button </h5>
<button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</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>
</body>
</html>

Output

The following image shows a basic tooltip with a button function.

Basic Tooltip with Position

The tooltip displays using the position as per user requirement and application format. We can place a tooltip on the top, bottom, left, and right side of the content using bootstrap 5 elements. The data-bs-placement = "position(top)" element uses inside of the button or anchor function.

Syntax

The following syntax shows tooltip data in different positions with the button function.

<button type = "button" data-bs-toggle = "tooltip" data-bs-placement = "top|bottom|left|right" title = "Thank You!" >
Value
</button>

Example

The following example shows tooltip data in different positions with the button function.

<!DOCTYPE html>
<html lang = "en">
<head>
  <title >Bootstrap Tooltip Example </title>
  <meta charset = "utf-8">
  <meta name = "viewport" content="width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
  <h5> Bootstrap 5 Tooltip with Different Position </h5>  
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "top" title = "Thank You!" >
    Hover Here!
  </button>
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "bottom" title = "Thank You!" >
    Hover Here!
  </button>
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "left" title = "Thank You!" >
    Hover Here!
  </button>
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "right" title = "Thank You!" >
    Hover Here!
  </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>
</body>
</html>

Output

The following image shows different position tooltips with button functions.

Basic Tooltip with Html Element

The data-bs-html = "true" element uses inside of the button or anchor function. If it is true, the tooltip's title will display HTML tags. If false, the DOM will be filled with information using the inner Text attribute. This element shows a tooltip on the page as per availability and required position.

Syntax

The following syntax shows tooltip data with an Html element.

<button type = "button" data-bs-toggle = "tooltip" data-bs-html = "true" title = "Thank You!" >
Value
</button>

Example

The following example shows tooltip data with html element.

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with HTML Element</h5>
<button href = "#" class = "btn btn-info" type = "button" data-bs-html="true" data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</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>
</body>
</html>

Output

The following image shows a tooltip with the Html function.

Basic Tooltip with Offset

The data-bs-offset = "10,15" element uses inside of the user interactive function. This element shows a tooltip on the page as per the required position from the button or anchor element.

Syntax

The following syntax shows the tooltip function with offset value from the html element.

<button type = "button" data-bs-toggle = "tooltip" data-bs-offset = "10,15" data-bs-placement = "top" title = "Thank You!" > 
Value
</button>

Example

The following example shows the required offset value for the tooltip function from the html element.

<!DOCTYPE html>
<html lang = "en">
<head>
<title > Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with HTML Element</h5>
<button href = "#" class = "btn btn-info" type = "button" data-bs-offset = "10,15"  data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</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>
</body>
</html>

Output

The following image shows the tooltip function with an offset to the button.

Basic Tooltip with Disabled button

The disabled button does not show the tooltip function on the web page. The <span> and <button> tag require for the displaying tooltip data. The tabindex = "0" element is placed in the span tag to show the tooltip.

Syntax

The following syntax shows the tooltip function with the disabled element.

<span class="d-inline-block" tabindex = "0" data-bs-toggle = "tooltip" title = "Thank You!" >
<button href = "#" class = "btn btn-info" type = "button" disabled> Click </button>
</span>

Example

The following example shows the tooltip function with the disabled button.

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with Disabled Button </h5>
<span class="d-inline-block" tabindex="0" data-bs-toggle = "tooltip" title = "Thank You!" >
<button href = "#" class = "btn btn-info" type = "button" disabled>
Hover Here!
</button>
</span>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

Output

The following image shows the tooltip function with the disabled button.

Conclusion

The bootstrap 5 tooltip function works to display extra information using the interactive pop-up box. The tooltip function helps users and developers to get detailed information. It works to create user-friendly, detailed, and informative functions for the application.

Next TopicBootstrap 5 Flex

← prev next →