Bootstrap Snippet Tooltip Simple Hover using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Tooltip Simple Hover"
Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Tooltip Simple Hover" Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Tooltip Simple Hover"
Bootstrap 3.3.0 Snippet by sumi9xm