| 
<!DOCTYPE HTML >
|
| <html>
|
| <head>
|
| <meta charset="utf-8">
|
| <title>jquery</title>
|
|
|
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
| <script type="text/javascript">
|
| $(document).ready(function(){
|
| $("span.tooltip").css({
|
| display : "none",
|
| opacity : "0.5",
|
| position: "absolute"
|
| });
|
|
|
| $("a").mouseover(function(){
|
| $("span.tooltip").fadeIn();
|
| }).mouseout(function(){
|
| $("span.tooltip").fadeOut();
|
| }).mousemove(function(e){
|
| $("span.tooltip").css({
|
| "top":e.pageY +10+"px",
|
| "left":e.pageX +10+"px"
|
| });
|
| });
|
| });
|
| </script>
|
| <style type="text/css">
|
| body {
|
| background: #777;
|
| color: white;
|
| }
|
|
|
| a {
|
| color: #00CCFF;
|
| }
|
|
|
| h1 {
|
| width: 80%;
|
| margin: 10px auto;
|
| }
|
|
|
| p {
|
| margin: 10px 10%;
|
| }
|
|
|
| span.tooltip {
|
| line-height: 1.5;
|
| color: white;
|
| width: 200px;
|
| background: #FF9900;
|
| border: 2px solid white;
|
| padding: 1em;
|
| font-size:10pt;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <h1>tooltip sample</h1>
|
| <p>
|
| <a
|
| href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> <span
|
| class="tooltip">이것은ASCII.jp<br /> <strong>Web제작현장에서
|
| 사용한 jQuery<br />UI디자인 입문
|
| </strong><br />의 샘플 프로그램입니다.
|
| </span>
|
| </body>
|
| </html> |