UI Components

Tool Tips

Demo
Code

Hover over me
Tooltip for top position
Tooltip for bottom position
Tooltip for left position
Tooltip for right position

Description

The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:

Setup

Step 1 : Add css file in your html : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Step 2 : Add JS file in your html : <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Step 3 : Add HTML code from code tab

HTML

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Tooltip for top position</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Tooltip for bottom position</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Tooltip for left position</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Tooltip for right position</a>

Demo
Code

HTML

Default Modal

<div class="tooltip-container">
  Hover Me !
  <span class="tooltip">Praesent ut tincidunt ligula. Donec at sem sit amet nulla porttitor consequat sit amet quis velit. Phasellus imperdiet mi in velit gravida tincidunt.</span>
</div>

CSS

.tooltip-container {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.tooltip-container .tooltip {
    opacity: 0;
    z-index: 99;
    color: #bbb;
    width: 190px;
    display: block;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    text-shadow: 1px 1px 2px #111;
    background: rgba(51,51,51,0.9);
    border: 1px solid rgba(34,34,34,0.9);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    right: -80px;
    bottom: 40px;
}

.tooltip-container .tooltip:before, .tooltip-container .tooltip:after {
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(51,51,51,0.9);
    position: absolute;
    bottom: -10px;
    left: 43%;
}

.tooltip-container:hover .tooltip, .tooltip-container a:hover .tooltip {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}