Tooltip(link).html

<style>
  .tooltip{position: relative;}
  .tooltip .tooltiptext {
      width: 155%;
      padding: 10px;
      opacity: 0;
      font-size: .8em;
      border-radius: 3px;
      text-align: center;
      transition: ease-in-out .2s;
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      left: -20%;
      top: -35px;
      background-color: #000;
      color: #fff;
  }
  .tooltiptext::before{
    content: "";/*讓before顯示出來*/
    position: absolute;
    top: 15px; /*調整位置*/
    right: 50%;/*調整位置*/
    padding: .8em;/*做出對話框的角*/
    background-color: inherit;
    border: inherit;/*讓before繼承talkingFrame的CSS屬性*/
    border-right: 0;/*隱藏內邊的border*/
    border-bottom: 0;/*隱藏內邊的border*/
    transform: rotate(45deg);/*旋軟角度*/
    z-index: -1;
  }
  .tooltip:hover .tooltiptext {opacity: 1;}
</style>

<div class="tooltip">
  <a href=""><span class="tooltiptext">View All Works</span></a>
</div>