library_books<span class="tooltip">
  top
  <span class="tooltip-text top">Any Text</span>
</span>

library_books<style>
  *{box-sizing:border-box;}
  .tooltip {
    position:relative;
    cursor:pointer;
    background-color:#a1ff89;
    padding:8px 16px;
    text-align:center;margin:10px 10px
  }
  .tooltip-text{
    position:absolute;
    background-color:#fcddb8;
    width:100px;
    border-radius:2px;
    padding:8px 12px;
    display:none;
    text-align:center;
    z-index:1
  }
  .tooltip-text::after{
    content:'';
    position:absolute;
    border:10px solid transparent;
  }
  .tooltip:hover .tooltip-text{display:block}
  
  /*For top tooltip*/
  .tooltip-text.top{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);}
  .tooltip-text.top::after{border-top-color:#fcddb8;left:calc(50% - 10px);bottom: -20px;}

  /*For bottom tooltip*/
  .tooltip-text.bottom{top:calc(100% + 10px);left:50%;transform:translateX(-50%);}
  .tooltip-text.bottom::after{border-bottom-color:#fcddb8;left:calc(50% - 10px);top: -20px;}
  
  /*For left tooltip*/
  .tooltip-text.left{top:50%;right:calc(100% + 10px);transform:translateY(-50%);}
  .tooltip-text.left::after{border-left-color:#fcddb8;bottom:calc(50% - 10px);right: -20px;}

  /*For right tooltip*/
  .tooltip-text.right{top:50%;left:calc(100% + 10px);transform:translateY(-50%);}
  .tooltip-text.right::after{border-right-color:#fcddb8;bottom:calc(50% - 10px);left: -20px;}
</style>