tooltipsy 사용하기 쉬운 jquery library
링크
https://github.com/briancray/tooltipsy (215) http://note.tloghost.kr/ex/tooltipsy/index.php (179)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>