개성 넘치는 툴팁 만들기!! ( Jquery + CSS ) |
레이어에 툴팁 내용을 복사하는 스크립트인지라..
배경 레이어는 보통의 레이어 꾸미듯이 똑같이 꾸며주면 되고, HTML title 속성값에는 태그를 넣어도 된다..
주의할 점은 속성값 내에 태그가 들어가니까 각각의 속성값을 감싸는 따옴표만 구분해주면 됨!
<html> <head> <script src="./images/tooltipsy.min.js"></script> </head> <body> <a href="#" class="t_tistory" title="요즘 스킨저장소가<br>또 불안한디.. <img src='...'>"> 티스토리 </a> vs <a href="#" class="t_naver" title="<span style='font-style:italic; font-weight:bold; font-size:2em;'>Get Out !</span>"> 네이버 </a> <script> $('.t_tistory').tooltipsy({ css: { 'padding': '12px 16px', 'max-width': '240px', 'font-family': 'Noto+Serif, 렉시새봄R', 'font-size': '1.2em', 'line-height': '1.5', 'color': '#000', 'background-color': '#ff5100', 'border': '1px solid #222222', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none', 'margin-top': '-56px', 'text-align': 'center', 'border-radius': '3px' } }); $('.t_naver').tooltipsy({ css: { 'padding': '12px 16px', 'max-width': '240px', 'font-family': 'Noto+Serif, 렉시새봄R', 'font-size': '1.2em', 'line-height': '1.5', 'color': '#000', 'background-color': '#1fdf00', 'border': '1px solid #222222', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none', 'margin-top': '-56px', 'text-align': 'center', 'border-radius': '3px' } }); </script> </body> </html> |
툴팁을_레이어로_띄우기_(jquery+css).rar
