Tooltip Effect on Link

HTML

<br/><br/><br/><br/><br/>
<center>
    Arahkan mouse anda pada link berikut<br/>
    <a href="http://www.tapike.com/" data-tooltip="Tapike.com">Tapike.com</a></center>
<br/><br/><br/><br/><br/>
<center>
<center>
    Jangan lupa like dan follow tapike.com<br/><br/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/tapikecom&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowTransparency="true"></iframe>
<!-- Tempatkan tag ini di head atau tepat sebelum tag body penutup. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'id'}
</script>

<!-- Tempatkan tag ini di mana pun Anda ingin widget ditampilkan. -->
<div class="g-page" data-width="292" data-href="//plus.google.com/+Tapikecom" data-layout="landscape" data-rel="publisher"></div></center>

CSS

.tooltip{
    position: relative;
    display: inline-block;
    cursor: help;
    white-space: nowrap;
}

.tooltip-content{
    color:#fff;
    opacity: 0;
    visibility: hidden;     
    font: 12px Arial, Helvetica;
    text-align: center;
    border-color: #A42317 #A42317 #A42317 #A42317;
    border-style: solid;
    border-width: 1px;
    width: 150px;
    padding: 15px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -76px;    
    background-color: #fff;
    background-image: linear-gradient(#FF5848, #A42317);                    
    transition: bottom .2s ease, opacity .2s ease;                  
    }
    
.tooltip-content:after,
.tooltip-content:before {
    border-right: 16px solid transparent;
    border-top: 15px solid #A42317;
    background-image: linear-gradient(#A42317, #A42317); 
    bottom: -15px;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

.tooltip-content:before {
    border-right-width: 25px;
    border-top-color: #A42317;
    border-top-width: 15px;
    bottom: -15px;
}

.tooltip:hover .tooltip-content{
    opacity: 1;
    visibility: visible;
    bottom: 30px;       
}

JavaScript

$(document).ready(function(){
    $('[data-tooltip]').addClass('tooltip');
    $('.tooltip').each(function() {  
        $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');  
    });
    
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('.tooltip-content').css('visibility','visible');
          }).mouseout(function(){
            $(this).children('.tooltip-content').css('visibility','hidden');
          })
    }
});