HTML의 title 속성에 값을 넣으면 브라우저마다 다른 모양으로 출력되는데, 그게 꼴보기 싫기도 하고... 특히 커서를 올리고 난 뒤 1초 정도 지연된 후 툴팁이 뜨는 게 싫었다.
script
$('[title]').attr({ // title 속성 값을 data-title 이라는 사용자 속성에 넣음.
'data-title': function() {
return this.title;
},
'title': null // title 속성은 제거해야 브라우저 자체 툴팁이 안 나오겠지?
});
$('body').append('<div id="tooltip">tooltip</div>'); // 툴팁을 표시할 요소를 만듦. 원래는 CSS의 :before를 응용해서 만들까 했는데,
$('[data-title]').each(function(index) { // 위치정렬이랑 크기조절이 힘들어서 결국 스크립트로 만듦.
$('[data-title]:eq(' + index + ')').hover(function() {
$('#tooltip').text(function() {
return $('[data-title]:eq(' + index + ')').attr('data-title') // 까다로운 코딩구간도 개꿀 반복문인 each를 써서 개쉽게 문제 해결.
}).css({
'visibility': 'visible',
'opacity': 1,
'top': function() {
return $('[data-title]:eq(' + index + ')').offset().top - $(this).outerHeight() - 12 + 'px';
},
'left': function() {
return $('[data-title]:eq(' + index + ')').offset().left + ($('[data-title]:eq(' + index + ')').outerWidth() - $('#tooltip').outerWidth()) / 2 + 'px';
}
});
}, function() {
$('#tooltip').css({
'visibility': 'hidden',
'opacity': 0
});
});
}); css
/* 그리고 나머지 고정된 스타일은 CSS로 대충 만듦 */
#tooltip {
color: #fff;
position: absolute;
top: 0;
visibility: hidden;
opacity: 0;
background: #212121;
transition: 0.25s opacity;
z-index: 2;
padding: 1ex;
border-radius: 3px;
max-width: 400px;
}
#tooltip:before {
border-color: #212121 transparent transparent transparent;
border-width: 1ex 1ex 0 1ex;
border-style: solid;
content: " ";
position: absolute;
left: calc(50% - .5em);
bottom: -.9ex;
} 이 코드를 짠 장본인은 아름다운 툴팁의 모습에 감탄하여 감동의 눈물을 흘렸다고 한다. ( ← 여기에 마우스 커서를 올려보자 )
끝.
'기록 #01: 컴퓨터' 카테고리의 다른 글
| 안드로이드 토스트 위치 제어 (0) | 2016.04.19 |
|---|---|
| 안드로이드 이미지뷰에 이미지 src 바꾸기 (1) | 2016.04.11 |
| 게시물 중앙에 애드센스 자동출력 (6) | 2015.08.15 |
| 페이지 내부 링크로 이동할 때 스크롤을 부드럽게 (5) | 2015.08.04 |
| 댓글달기 버튼에 동적 효과 추가 (9) | 2015.04.12 |
| css 플립 카드 (1) | 2014.10.08 |
| 하드디스크 포맷기 (1) | 2013.05.25 |
| 모바일 웹앱 제작 후기 (0) | 2013.03.21 |
| 2015 수능 디데이 카운터 (1) | 2013.02.19 |
| 모스 부호(Morse code) 해석기 (67) | 2013.02.16 |