반응형
tooltip.txt
툴팁에 대한 설명 ☞ 설명 보기
툴팁 스크립트와 스타일시트를 적용한 모습.
Tooltip Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>
☞ <head>와 </head> 사이에 넣는다.
Tooltip CSS
#s-m-t-tooltip{
font-family:trebuchet ms;
font-size:9px;
position:absolute;
margin-top: 15px;
letter-spacing:1px;
z-index:9999;
background:rgba(255,255,255,1);
border-radius:2px;
color:#565656;
padding:2px 3px 2px 3px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
font-family:trebuchet ms;
font-size:9px;
position:absolute;
margin-top: 15px;
letter-spacing:1px;
z-index:9999;
background:rgba(255,255,255,1);
border-radius:2px;
color:#565656;
padding:2px 3px 2px 3px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}
반응형