CSS를 이용한 Tooltip입니다.

CSS:

.tooltip {

position: relative;

}

.tooltip:before, .tooltip:after {

position: absolute;

transition: All 0.5s ease;

-webkit-transition: All 0.5s ease;

-moz-transition: All 0.5s ease;

-o-transition: All 0.5s ease;

margin-left: -100px;

left: 50%;

bottom: 300%;

display: block;

color: #000;

opacity: 0;

}

.tooltip:before {

content: attr(title);

border: solid 1px #0088cc;

background: #FFF;

width: 200px;

text-align: center;

z-index: 2;

font-size: 13px;

line-height: 18px;

padding: 5px;

}

.tooltip:after {

content: '\25c6';

margin-left: 0;

margin-top: 10px;

width: 15px;

height: 15px;

z-index: 1;

line-height: 28px;

color: #0088cc;

font-size: 20px;

}

.tooltip:hover:before, .tooltip:hover:after {

bottom: 150%;

opacity: 1;

} 

HTML:

<a href="#" title="CSS로 구현하는 툴팁!!" class="tooltip">Tooltip</a> 

미리보기:

http://365ok.co.kr/dn/css/tooltips.html