menu

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; }

이 코드를 짠 장본인은 아름다운 툴팁의 모습에 감탄하여 감동의 눈물을 흘렸다고 한다. ( ← 여기에 마우스 커서를 올려보자 )

끝.

신고

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. ㅌㅊㅍㅌㅊㅍ

    익명490 2015.05.18 23:37 신고   link delete reply
  2. 내용 감사합니다~

    익명284 2015.06.07 08:22 신고   link delete reply

퍼가지 마세요...
링크로 공유하세요 ㅠㅠ
부탁할게요 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH

티스토리 툴바