JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<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>

CSS

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； }

JavaScript

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();})