Tooltip with Bootstrap | BootStrap Tutorial

Oct 20, 2020 bootstrap, HTML, CSS, 3956 Views

Tooltip is like a pop-up box for some element which can be anything such as a link, button, or a common text, to provide some additional information about that element. It shows up generally when we hover the mouse over that particular element.

Tooltip with Bootstrap

Introduction

Tooltip is useful to provide some hints or additional information for the respective element or text. Whenever the user will hover over that element or text the tooltip will show up. The positioning of the tooltip can be done as required with the help of some classes or CSS properties. The tooltip can be provided with the help of CSS also by mentioning several properties for that element at the different phases to show it as a tooltip, but with the help of bootstrap, it can be done easily and quickly. With the help of Bootstrap Tooltip, it becomes easy to provide tooltips for any element. It requires some general syntax for this which includes

data-toggle="tooltip" title="text here"

The data-toggle triggers the tooltip property in Bootstrap and the title consists of the texts to be displayed for the tooltip.

By default, the tooltip will appear on the top of the element in which the tooltip is mentioned but with some attribute of Bootstrap, we can change that too. The attribute of data-placement will help to place the tooltip according to our choice. The values for the attribute would be top, bottom, left, and right.

NOTE: Tooltip depends on 3^rd party library of JavaScript. The Popper.js is required for the tooltip and the tooltip with no text in the title will not be displayed.

There can be multiple ways to apply tooltip, for instance, it can be done with the help of JavaScript too. Moreover, there are many attributes with data for the tooltip in Bootstrap to make it accessible, design, add timing, and many more according to our requirements.

Method/Output

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
<p>Hello here I will show you the usage of <a href="#" data-toggle='tooltip' title="This is first tooltip"> tooltip </a> for a text element using the Bootstrap. You can use as many <a href="#" data-toggle='tooltip' title="This is second tooltip"> tooltip </a>as you want according to your need. </p> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>


</html>

Tooltip with Bootstrap | BootStrap Tutorial