Bootstrap 5 Tooltips-ApiDemos™

Bootstrap 5 Tooltips, Tooltips is a small pop-up window that is displayed when the mouse is moved over the element and disappears when the mouse is moved outside the element.

How to create Tooltips

Tooltips are created by adding data-bs-toggle="tooltip" to the element.

The content of the title attribute is the content displayed by Tooltips.

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="I am the tip content!">Mouse over me</button>

Note: Tooltips are written in the JavaScript initialization code: then the tooltip() method is called on the specified element.

The following example allows Tooltips to be used anywhere in the document.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Tooltips demos(apidemos.com)</h3>

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="I am the tip content!">Mouse over me</button>
</div>

<script>
// initialize Tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

</body>
</html>

Output:

Bootstrap 5 Tooltips

Specify the location of Tooltips

By default Tooltips is displayed above the element.

You can use the data-bs-placement property to set the orientation of the Tooltips display: top, bottom, left or right:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Tip box display position example(apidemos.com)</h3>
  <p>You can use the data-bs-placement property to set the orientation of the prompt box:</p>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="I am the tip content!">top</a>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I am the tip content!">bottom</a>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="I am the tip content!">left</a>
  <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="I am the tip content!">right</a>
</div>

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

</body>
</html>

Output:

Bootstrap 5 Tooltips

Bootstrap 5 Tooltips

How to create Tooltips

Specify the location of Tooltips

Related

Top