Bootstrap 4 tooltip

In this article, we will create a tooltip with the help of Bootstrap4 tooltip. At the beginning of this article, we will learn some basics of Bootstrap and Bootstrap 4. After that, we will understand this concept with the help of various examples of Bootstrap4 tooltip.

What do you mean by Bootstrap4?

Bootstrap is used for adding design in HTML documents similar to cascading style sheets. The latest version of Bootstrap is Bootstrap 4. It is free to download and use.

The link below is used to add Bootstrap 4 to a template.

What do you mean by Bootstrap4 Tooltip?

A Bootstrap 4 tooltip is also known as an info tip or screen tip. A graphical user interface (GUI) element is used in conjunction with the cursor or mouse pointer to display information about an item without clicking on it.

Let's take various examples of Bootstrap4 tooltip.

Example 1:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap4 tooltip Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<style>
body {
  background: #F1F1F1;
  text-align: center;
}
a {
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
a:hover {
text-decoration: none;
}
body h1 {
  font-family: 'Lobster', cursive;
  margin: 150px 20px 40px;
  font-size: 50px;
  letter-spacing: 0.5px;
  color: #999999;
  text-align: center;
}
h3 {
    background: #333;
    color: #E086D3;
    padding: 10px 20px;
    border-radius: 56px;
  }
  </style>
<body>
<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!"> Hover over me </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
<script type = "text/javascript">
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>
</html>

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of the Bootstrap4 tooltip. When a user hovers on the hover over a text, then a tooltip is shown.

Output:

Following is the output of this example:

Example 2:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap4 tooltip Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu');
body h1 {
  font-family: 'Lobster', cursive;
  margin: 150px 20px 40px;
  font-size: 50px;
  letter-spacing: 0.5px;
  color: #999999;
  text-align: center;
}
body {
  background: #F1F1F1;
  box-sizing: border-box;
  color: #444;
  font-family: 'Comfortaa', cursive;
  text-align: center;
  font: 16px;
}
</style>
<body>
<div class="container">
<div class="row">	
<div class="col-xl-3">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
</div>
<div class="col-xl-3">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
</div>
<div class="col-xl-3">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
 Tooltip on bottom
</button>
</div>
<div class="col-xl-3">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
 Tooltip on left </button>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of the Bootstrap4 tooltip. When a user hovers on the particular text, then the tooltip is shown according to the direction.

Output:

Following is the output of this example:

Example 3:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap4 tooltip Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container mt-5">
  <div class="col-xs-12 text-center">
    <button class="btn btn-dark" data-toggle="tooltip" title="10%" data-offset="50%, 3"> TOP RIGHT </button>
   <button class="btn btn-dark" data-toggle="tooltip" title="10%" data-offset="-48%, 3" data-placement="bottom"> BOTTOM LEFT </button>
  </div>
</div>
<style>
.tooltip > .arrow {
  left: 50% !important;
  transform: translateX(-50%);
}
@import url('https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu');
body {
/*   background: #EEE; */
    background: url("https://s16.postimg.org/4d17gd0vp/smbg.png");
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #444;
  font-family: 'Comfortaa', cursive;
  text-align: center;
  font: 16px;
}
h1 {
  margin-bottom: 7%;
}
h3 {
    background: #333;
    color: #E086D3;
    padding: 10px 20px;
    border-radius: 56px;
    width: 8em;
    margin: 20% auto 1% auto;
  }
</style>
<script type = "text/javascript">
$(document).ready(function() {
  $("[data-toggle=tooltip]").tooltip('show');
});
</script>
</body>
</html>

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of Bootstrap4 tooltip.

Output:

Following is the output of this example:

Example 4:

<html>
<head>
    <meta charset="UTF-8">
    <title> Tooltip Hover Effect </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<style>
a {
  background: #D2D7D3;
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
body {
  background: #e6e6e6;
  font-family: "Helvetica", "Arial";
  padding-top: 100px;
  text-align: center;
}
a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;
}
a.facebook:before {
  content: '\f09a';
}
a.twitter:before {
  content: '\f099';
}
a.github:before {
  content: '\f113';
}
a.dribble:before {
  content: '\f17d';
}
a.pinterest:before {
  content: '\f0d2';
}
a span {
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position:  absolute;
  bottom: 0;
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}
a span:before {
  content: '';
/*   width: 0;
  height: 0; */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  bottom: -5px;
  left: 40px;
}
a:hover span {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
}
a.facebook:hover {
  background-color: #4183d7; 
  color: #bfbfbf;
}
a.facebook span {
  color: #4183d7;
}
a.twitter:hover {
  background-color: #19b5fe;
  color: #fff;
}
a.twitter span {
  color: #19b5fe;
}
a.github:hover {
  background-color: #000;
  color: #fff;
}
a.github span {
  color: #000;
}
a.dribble:hover {
  background-color: #f62459;
  color: #fff;
}
a.dribble span {
  color: #f62459;
}
a.pinterest:hover {
  background-color: #f22613;
  color: #fff;
}
h3 {
    background: #333;
    color: #E086D3;
    padding: 10px 20px;
    border-radius: 56px;
  }
a.pinterest span {
  color: #f22613;
}
</style>
<body>
  <h3> Tooltip Example </h3>   
 <div>
        <a href="http://www.facebook.com" class="icon facebook"> <span> Facebook </span> </a>
        <a href="http://www.twitter.com" class="icon twitter"> <span> Twitter </span> </a>
        <a href="http://www.github.com" class="icon github"> <span> Github </span> </a>
        <a href="http://www.dribble.com" class="icon dribble"> <span> Dribble </span> </a>
      <a href="http://pinterest.com" class="icon pinterest"> <span> Pinterest </span> </a>
    </div>
</body>
</html>

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of the Bootstrap4 tooltip.

Output:

Following is the output of this example: