Charleswang8711
8/2/2018 - 3:17 AM

Tooltip for Top_Arrow_Buttom_Tips

The tooltip is uesd by CSS

tooltip_top_arrow
content_copyfile_download
<!DOCTYPE html>
<HTML>
<style>
/* Bottomtooltip */

a.event,  a.banner{
    position: relative;
    display: inline-block;
    
}

a.event .bottomTooltip ,  a.banner .bottomTooltip{display: none}

a.event:hover .bottomTooltip , a.banner:hover .bottomTooltip{ /*the span will display just on :hover state*/
    width:200px;
    margin-left: -90px;  /* let the tooltip middle align the parent element */
     margin-top: 5px; 
    padding:10px;
    font-size:12px;
    background-color:#fff;
    border:2px solid #999;
    border-radius:4px;
    position: absolute;
    /* the position of the tooltip*/
    z-index: 1;
    top: 120%;  /*the margin between the parent and tooltip*/
    left: 50%;  /*the left positon relative to the left side of the parent*/

    display: inline-block;
  }
  a.event:hover .bottomTooltip::before,
a.event:hover .bottomTooltip::after ,
  a.banner:hover .bottomTooltip::before,
a.banner:hover .bottomTooltip::after 
{
    content: '';
    position: absolute;
    left: 50%;
    top: -5px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #fff; 
}

  a.event:hover .bottomTooltip::before, 
  a.banner:hover .bottomTooltip::before
  {
     border-bottom-color: #999;
     top: -9px;
  }
  </style>
  
  <body>
    <a href="#" class="event">
      <span class="leftTooltip"> context of the tooltips</span>
    </a>
 
    <a href="#" class="banner">
      <span class="leftTooltip"> context of the tooltips</span>
    </a>
  </body>
  
</HTML>