Tooltip

    

<div>
   <p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. </p>
<button type="button" class="btn btn-primary " data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</div>
 
 
                                          
      
      
         
         

    

   
      .btn {
         border-radius: 6px;
         text-transform: capitalize;
         font-weight: 600;
         margin-bottom: 5px;
     }
     .btn-primary {
         --bs-btn-color: #fff;
         --bs-btn-bg: #167DF5;
         --bs-btn-border-color: #167DF5;
         --bs-btn-hover-color: #fff;
         --bs-btn-hover-bg: #61A7F8;
         --bs-btn-hover-border-color: #ABD0FB;
         --bs-btn-focus-shadow-rgb: 49,132,253;
         --bs-btn-active-color: #fff;
         --bs-btn-active-bg: #0D67CB;
         --bs-btn-active-border-color: #ABD0FB;
         --bs-btn-active-shadow: inset 0 3px 5pxrgba(0, 0, 0, 0.125);
         --bs-btn-disabled-color: #fff;
         --bs-btn-disabled-bg: #0d6efd;
         --bs-btn-disabled-border-color: #0d6efd;
         line-height: 1.3800000;
     }
     .btn {
         --bs-btn-padding-x: 0.75rem;
         --bs-btn-padding-y: 0.375rem;
         --bs-btn-font-family: ;
         --bs-btn-font-size: 1rem;
         --bs-btn-font-weight: 400;
         --bs-btn-line-height: 1.5;
         --bs-btn-color: #212529;
         --bs-btn-bg: transparent;
         --bs-btn-border-width: 1px;
         --bs-btn-border-color: transparent;
         --bs-btn-border-radius: 0.375rem;
         --bs-btn-hover-border-color: transparent;
         --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
         --bs-btn-disabled-opacity: 0.65;
         --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
         display: inline-block;
         padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
         font-family: var(--bs-btn-font-family);
         font-size: var(--bs-btn-font-size);
         font-weight: var(--bs-btn-font-weight);
         line-height: var(--bs-btn-line-height);
         color: var(--bs-btn-color);
         text-align: center;
         text-decoration: none;
         vertical-align: middle;
         cursor: pointer;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;
         border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
         border-radius: var(--bs-btn-border-radius);
         background-color: var(--bs-btn-bg);
         transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     }