气泡框

   <div class="right_icon icon-phone">
      <a href=""><img src="img/icon_01.png" alt=""></a>
      <div class="icon_phone"><p>CBO&nbsp;&nbsp;Butterfly</p>(+86) 11111111111</div>
   </div>
   <div class="right_icon icon-twitter" onclick="window.open('twitter.com')">
      <img src="img/icon_02.png" alt="">
      <div class="icon_phone">twitter.com</div>
   </div>
   <div class="right_icon icon-email" onclick="window.open('mailto:')">
      <img src="img/icon_03.png" alt="">
      <div class="icon_phone">service</div>
   </div>
   <div class="right_icon icon-tme" onclick="window.open('https://www.csdn.net/')">
      <img src="img/icon_04.png" alt="">
      <div class="icon_phone">https://www.csdn.net/</div>
   </div>

 

.right_icon {
   width: 40px;
   margin:0 12px;
   cursor: pointer;
   position: relative;
}
.right_icon img{
   width: 40px;
}

.right_icon a{
   display: block;
   width: 100%;
   height: 100%;
}

.icon-phone{
   margin-left: 0;
}
.right_icon:hover .icon_phone{
   /*width: 196px;*/
   /*border: solid 1px #333333;*/
   visibility: visible;
   opacity: 1;
}

.right_icon .icon_phone{
   width: 232px;
   height: 40px;
   line-height: 40px;
   font-size: 12px;
   background: #222222;
   position: absolute;
   bottom: 121%;
   color: #ddd;
   left: 0;
   border:1px solid #333;
   font-weight: 300;
   letter-spacing: 1px;
   transition: all .4s ease-in-out;
   visibility: hidden;
   opacity: 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
}


.right_icon .icon_phone:after{
   content: '';
   display:block;
   width:0;
   height:0;
   border-width:0 10px 10px;
   border-style:solid;
   border-color:transparent transparent #222222;
   position:absolute;
   bottom:-10px;
   left:4%;/* 三角形居中显示 */
   transform: rotateZ(180deg);
}

.right_icon .icon_phone:before{
   content: '';
   display:block;
   width:0;
   height:0;
   border-width:0 10px 10px;
   border-style:solid;
   border-color:transparent transparent #444;
   position:absolute;
   bottom:-11px;
   left:4%;
   transform: rotateZ(180deg);

}

.icon-phone .icon_phone{
   flex-wrap: wrap;
   height: 70px;
   letter-spacing: 2px;
}
.icon-phone .icon_phone p{
   width: 100%;
   height: 20px;
   line-height: 45px;
   text-align: center;
   font-size: 12px;
   margin-bottom: 0;
}

.icon-twitter .icon_phone{
   left: -63px;
}

.icon-twitter .icon_phone:before,
.icon-twitter .icon_phone:after{
   left: 32%;
}


.icon-email .icon_phone{
   left: -128px;
}

.icon-email .icon_phone:before,
.icon-email .icon_phone:after{
   left: 60%;
}

.icon-tme .icon_phone{
   left: -299px;
   width: 340px;
}
.icon-tme .icon_phone:before,
.icon-tme .icon_phone:after{
   left: 91%;
}

.right_icon .icon_phone:hover{
   color: #fff;
}

 

如果发生报错，请查看一下类名，类名我换了一下。