tooltipsy 사용하기 쉬운 jquery library > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

tooltipsy 사용하기 쉬운 jquery library 정보

jQuery 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>

추천
0

댓글 0개

전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT