this.t_tip = function() { this.xOffset = -10; this.yOffset = 20; $(".tooltip").unbind().hover( function(e) { this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<span id="tip_body">' + this.t + '</span>' ); $('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst"); }, function() { this.title = this.t; $("#tip_body").remove(); } ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("#tip_body").css("top", this.top+"px").css("left", this.left+"px"); } ); }; jQuery(document).ready(function($){t_tip();})
<p><a href="#" class="tooltip" title="このブログもjQueryを要所要所に使っています!<br/>改行も出来る">jQuery</a>たのしいですねー。title属性を取得しています。</p> <p>背景などの<a href="#" class="tooltip" title="リストも作れる<ol><li>list01</li><li>list02</li><li>list03</li></ol>">スタイルはcss</a>で行うので透過なども可能です。</p> <p>手軽に実装出来るので覚えると重宝しますね。</p>
p{font-size:12px; line-height:16px;}a{color:red ;} #tip_body { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: #333; color:#fff; border: 1px solid red; opacity: 0.9 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; }