tootip

tooltip using title attribute

by I Sang Hyeon

HTML

<div class="tb_box1">
        <table class="tb01">
            <colgroup>
                <col style="width:4%;">
                <col style="width:5%;">
                <col style="width:5%;">
                <col style="width:10%;">
                <col style="width:13%;">
                <col style="width:7%;">
                <col style="width:7%;">
                <col style="width:7%;">
                <col style="width:5%;">
                <col style="width:5%;">
                <col style="width:7%;">
                <col style="width:7%;">
                <col style="width:7%;">
                <col style="width:4%;">
                <col style="width:7%;">
            </colgroup>
            <thead>
                <tr>
                    <th><label>선택 <input type="checkbox" id="chkAllRow" name="chkRow"></label></th>
                    <th>주문번호</th>
                    <th>발주일자</th>
                    <th>주문자</th>
                    <th>제품명</th>
                    <th>단가</th>
                    <th>수량</th>
                    <th>금액</th>
                    <th>1공정</th>
                    <th>2공정</th>
                    <th>판매처리</th>
                    <th>결제구분</th>
                    <th>입고처리</th>
                    <th>인쇄</th>
                    <th>비고</th>
                </tr>
            </thead>
            <tbody id="tbodyList" class="pointerTd">
                    <tr salesseq="304066" salesorderno="20220122013" isordprint="0">
                        <td><input type="checkbox" name="chkRow"></td>
                        <td class="align_r">20220122013</td>
                        <td>22-01-22</td>
                        <td>임춘기 신학생 (개봉동성당)</td>
                        <td class="align_l tdTooltip2" title="
                    <table>
                        <tbody><tr>
                          <th>주&amp;nbsp;&amp;nbsp;문&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;일&amp;nbsp;&amp;nbsp;자</th>
                         ...

CSS

@charset "utf-8";
/* CSS Document */

/* 공통 */
label{margin-right:10px; white-space: nowrap;}
input[type="checkbox"]{height:15px !important;}
input.tar{text-align:right;}
input[type="file"]{padding:2px !important;}

.in01{width:100%;}
.in02{width:60%;}
.in03{width:150px;}
.in04{width: 49.4%;}
.in05{width:100px;}
.in06{width:80%;}
.in07{width:60px;}
.in08{width:36%;}
.in09{width:10%;}
.in10{width:38%;}
.in11{width:8%;}
.in12{width:20%;}
.in13{width:15%;}
.in14{width:44%;}
.in15{width:70%;}
.in16{width:30%;}
.in17{width:37%;}
.in18{width:55%;}
.in19{width:300px !important;}

.col_r{width: 70px;height: 28px;display:inline-block;float: right;}


select{border: 1px solid #ddd; padding: 0 5px; height: 32px;  border-radius: 4px; font-size:15px;}
.se01{width:100%;}
.se02{width:100px;}
.se03{width:30%;}

textarea{border: 1px solid #ddd; padding: 0 5px; width:100%;  border-radius: 4px; font-size:15px;}
.tx01{height: 400px;}
.tx02{height: 100px;}
.tx03{height: 300px;}
.tx04{height: 200px;}

.txNone{resize: none;}



span.p_text{margin-left:7px; color:#666;font-weight: 300;}
span.p_text.c_red{color:#ca1010;}
span.colored{width:70px; height:25px; display: inline-block; border-radius: 4px;}


.tooltip {position: relative; }
.tooltip-text {
    text-align:left; display: none;position: absolute;z-index:100; left:30px;
    font-weight:300; width:150px;border: 2px solid #ddd; border-radius: 5px;
    padding:5px 10px; font-size:13px;color:#666; background:#fff;
}
.tooltip:hover .tooltip-text { display: block;}

.tooltip2 {
    position: absolute;  z-index: 999; color: #555; font-size: 13.5px; min-width:150px; text-align:left;
}
.tooltip2 .tooltip2Body { background-color: #fff; border:4px solid #ccc; padding:10px;}

/* table9 : none border*/
.tooltip2 .tooltip2Body table{}
.tooltip2 .tooltip2Body table th, .tooltip2 .tooltip2Body table td{padding:0 5px; border:none; background:none !important;}


.cen{width: 5%;display: inline-block;text-align:...

JavaScript

$(document).ready(function(){
    // tooltip events 관련1
    $('#tbodyList').on('mouseover','tr td.tdTooltip2',function(){
        let t = $(this).attr('title');
        // 브라우져에서 제공하는 기본 툴 팁을 끈다
        $(this).attr('title','');
        // css와 연동하기 위해 html 태그를 추가해줌
        $(this).append('<div class="tooltip2"><div class="tooltip2Body">'+ t + '</div></div>');
    });
    
 	// tooltip events 관련2
    $('#tbodyList').on('mousemove','tr td.tdTooltip2',function(e){
        //마우스가 움직일 때 툴 팁이 따라 다니도록 위치값 업데이트
        $('.tooltip2').css('top', e.pageY + 10 );
        $('.tooltip2').css('left', e.pageX + 10 );
    });
    
 	// tooltip events 관련3
    $('#tbodyList').on('mouseout','tr td.tdTooltip2',function(){
        //위에서 껐던 브라우져에서 제공하는 기본 툴 팁을 복원
        $(this).attr('title',$('.tooltip2Body').html());
        $(this).children('div.tooltip2').remove();
    });
});