Bootstrap Snippet Social Icons with Tooltip using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<ul class="mbm_social">
    <li><a class="social-facebook" href="#">
        <i class="fa fa-facebook"><small>facebook</small></i>
        
        <div class="tooltip"><span>facebook</span></div>
        </a>
    </li>
    <li><a class="social-twitter" href="#">
        <i class="fa fa-twitter"><small>Twitter</small></i>
        <div class="tooltip"><span>Twitter</span></div>
        </a>
    </li>
    <li><a class="social-google-plus" href="#">
        <i class="fa fa-google-plus"><small>google +</small></i>
        <div class="tooltip"><span>google</span></div>
        </a>
    </li>
    <li><a class="social-linkedin" href="#">
        <i class="fa  fa-linkedin"><small>linkedin</small></i>
        <div class="tooltip"><span>linkedin</span></div>
        </a>
    </li>
</ul>
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
.mbm_social {
  margin:30px 0;
  padding: 25px;
  font-size: 0;
  float:left;
  width:100%;
  background:#fff;
  text-align:center;    
}
.mbm_social li {
    display: inline-block;
    list-style: outside none none;
    margin: 0 8px 0 0;
    padding: 0;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}
.mbm_social > li:last-child {
    margin: 0;
}
.mbm_social a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color:#fff;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 px;
  width: 116px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Social Icons with Tooltip"
Bootstrap 4.0.0 Snippet by MuhammadBilalMughal

Related: See More

Questions / Comments:

"Social Icons with Tooltip" Bootstrap 4.0.0 Snippet by MuhammadBilalMughal

Related: See More

Questions / Comments:

"Social Icons with Tooltip"
Bootstrap 4.0.0 Snippet by MuhammadBilalMughal