html - Tool Tip CSS not showing -

my css code looks far:

  .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:18px;    color:#000;    content:attr(title);    display:block;    left:50%;    padding:5px 15px;    position:absolute;    white-space:nowrap;    z-index:98   }   .tooltip:hover:before{     border:solid;     border-color:#111 transparent;     border-width:6px 6px 0 6px;     bottom:12px;     content:"";     display:block;     left:75%;     position:absolute;     z-index:99    } 

my html code looks this:

<p style="color:black;"><a href="#" title="sample tooltip" class="tooltip">link</a><p> 

for reason, nothing appearing. have color of text or how css code structured?

http://jsfiddle.net/nymtl/

this fiddle seems fine code. changed color: #000 #fff. black on black isn't visible.