평소 틈틈히 해놓은 것들 정리차원에서 올림
jsfiddle
http://jsfiddle.net/ichbintaeeun/6v2fakc6/3/
HTML
<body> <div class="sample-tooltip"> <p> The art of love...is largely the art of persistence.The art of love...is largely the art of persistence. <a class="show-tooltip">Albert Ellis(앨버트 엘리스)</a> The art of love...is largely the art of persistence. The art of love...is largely the art of persistence. </p> <span class="tooltip" style="display:none">Albert Ellis(앨버트 엘리스)는 1900년도에 태어나...</span> </div> </body>
CSS
<style> * {margin:0;padding:0;font-size: 12px;} /* 툴립 */ div.sample-tooltip {position:relative;width:500px;} div.sample-tooltip p{position:relative;background: #ccc;} div.sample-tooltip a.show-tooltip{display:inline-block;text-decoration: none;border-bottom:1px dotted #000;cursor:pointer;} div.sample-tooltip span.tooltip{position:absolute;display:inline-block;width:200px;padding:10px 20px;background:yellow;color:#000;} </style>
jQuery
<script> $(function(){ $(".show-tooltip").mouseover(function(){ var _x = $(this).offset().top; var _y = $(this).offset().left; var _height = $(this).height(); $(".tooltip").css({ "top":_x + _height +"px", "left":_y +20+"px" }).fadeIn(); }).mouseout(function(){ $(".tooltip").fadeOut(); }); }); </script>
'퍼블리싱 > jQeury, Javascript' 카테고리의 다른 글
| Customizabled scrollbars (jquery.nicescroll) (0) | 2014.11.28 |
|---|---|
| IE 8, 9버전에서 placeholder 적용시키기 (0) | 2014.11.11 |
| 스크롤따라 흐르는 TOP버튼, 버튼클릭하면 페이지최상단으로 이동하기 (0) | 2014.09.30 |
| userAgent 식별하기 (0) | 2014.09.29 |
| 브라우저체크 (0) | 2014.07.30 |