how to hide default title when using tooltip? Im using css and the code below to show a tooltip. It pulls from the title attribute. But currently both the tooltip and the default title popup. Is the there a way to hide the title but keep the tooltip? Thanks!

<a class="tooltip" title="Share On Facebook"></a>

.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:33px;
color:#fff;
content:attr(title);
display:block;
left:-50px;
padding:8px 0;
position:absolute;
white-space:nowrap;
z-index:98;
width:140px;
text-align:center;
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:27px;
content:"";
display:block;
left:-10px;
position:absolute;
z-index:99
}