"Tooltip Simple Hover"
Bootstrap 3.3.0 Snippet by sumitkumar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=0.1"> <meta name="author" content="sumit kumar"> <title>Simple Hover Tooltip</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> </head> <body> <div class="container"> <div class="row margin"> <div class="col-md-3 red-color"> <h4>Right Tooltip w/ Left Arrow</h4> <div class="tooltip-col text-center">Hover over me <i class="fa fa-phone" aria-hidden="true"></i> <span class="tooltiptext"><i class="fa fa-phone" aria-hidden="true"></i> <br>1800 555 444</span> </div> </div> <div class="col-md-3 light-blue"> <h4>Left Tooltip w/ Right Arrow</h4> <div class="tooltip-col">Hover over me <i class="fa fa-phone" aria-hidden="true"></i> <span class="tooltiptext2"><i class="fa fa-phone" aria-hidden="true"></i> <br>1800 555 444</span> </div> </div> <div class="col-md-3 yelo-color"> <h4>Bottom Tooltip w/ Top Arrow</h4> <div class="tooltip-col">Hover over me <i class="fa fa-phone" aria-hidden="true"></i> <span class="tooltiptext3"><i class="fa fa-phone" aria-hidden="true"></i> <br>1800 555 444</span> </div> </div> <div class="col-md-3 megenta-color"> <h4>Top Tooltip w/ Bottom Arrow</h4> <div class="tooltip-col">Hover over me <i class="fa fa-phone" aria-hidden="true"></i> <span class="tooltiptext4"><i class="fa fa-phone" aria-hidden="true"></i> <br>1800 555 444</span> </div> </div> </div> </div> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
.red-color{background-color: #F44336;color: #fff;padding-bottom: 60px;text-align: center; padding-top: 10px;} .light-blue{background-color: #00BCD4;padding-bottom: 60px;text-align: center; padding-top: 10px;} .yelo-color{background-color: #ffc107;color: #fff;padding-bottom: 60px;text-align: center; padding-top: 10px;} .megenta-color{background-color: #009688;padding-bottom: 60px;text-align: center; padding-top: 10px;} .margin{margin-top:100px;} /*///////////////Right Tooltip w/ Left Arrow////////////////*/ .tooltip-col { position: relative; display: inline-block; border-bottom: 1px dotted black; cursor:pointer; text-align:center; } .tooltiptext { visibility: hidden; width: 150px; height:50px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; box-sizing: border-box; position: absolute; z-index: 1; top: -13px; left: 110%; } .tooltiptext::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip-col:hover .tooltiptext { visibility: visible; } /*///////////////Left Tooltip w/ Right Arrow////////////////*/ .tooltiptext2 { visibility: hidden; width: 150px; height:50px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; box-sizing: border-box; position: absolute; z-index: 1; top: -13px; right: 120px; } .tooltiptext2::after { content: ""; position: absolute; top: 50%; right: -20px; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip-col:hover .tooltiptext2 { visibility: visible; } /*///////////////Bottom Tooltip w/ Top Arrow////////////////*/ .tooltiptext3 { visibility: hidden; width: 150px; height: 50px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; box-sizing: border-box; position: absolute; z-index: 1; top: 30px; right: -19px; } .tooltiptext3::after { content: ""; position: absolute; top: -20px; left: 61px; border-width: 10px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip-col:hover .tooltiptext3 { visibility: visible; } /*///////////////Top Tooltip w/ Bottom Arrow////////////////*/ .tooltiptext4 { visibility: hidden; width: 150px; height: 50px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; box-sizing: border-box; position: absolute; z-index: 1; top: -56px; right: -19px; } .tooltiptext4::after { content: ""; position: absolute; bottom: -20px; left: 61px; border-width: 10px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip-col:hover .tooltiptext4 { visibility: visible; }

Related: See More

Datepicker
Hover Effect Style
Different types of hover and transition effect.
Simple Vertical timeline

Questions / Comments: