tooltipsy 사용하기 쉬운 jquery library

a 태그에 title 이 있으면 툴팁이 mouseover 시 나타나고 mouseout시 사라집니다.

tooltipsy jquery 라이브러리는 옵션에 따라 click 시에 나타나게 할 수 있고 태그도 입력이 가능하고 나타 나는 위치를 설정할 수도 있습니다.

다음과 같이 사용하면 링크2와 같이 사용됩니다.

.tooltipsy {
    position:relative;
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}
.tooltipsy:after {
    position:absolute;
    content:'';
    bottom:-6px;
    left:50%;
    margin-left:-5px;
    width:10px; height:10px;
    background-color: #f5f5b5;
    border-right:1px solid #deca7e;
    border-bottom:1px solid #deca7e;
    display:block;
    transform:rotate(45deg);
}
</style>
<a href="#" class="hastip">tooltipsy</a>
<script>
$('.hastip').tooltipsy({
    offset: [0, -5],
    showEvent: 'click',
    hideEvent: 'click',
    content: '<strong>Hello, tooltipsy!</strong><br><a href="https://github.com/briancray/tooltipsy" style="color:blue;">tooltipsy github</a>'
    
});

</script>