[JQuery] tooltip

html

<tbody id="theme_tooltip">
    <tr>
        <td class="theme_name">
            <a href="theme_edit.php?idx=30748&amp;theme_type=samsung">[30748] lovely heart snow<span>(AOD + Video + Ringtone)</span></a>
            <span style="font-weight:normal"></span>
        </td>
        <td class="tooltip clearfix" data-photo="themeimg/202011/30748_hom_lovely heart snow.jpg">
            <div class="hover_img"><i class="fas fa-image"></i></div>
            <ul>
                <li style="color:#FF0000">E 2021-01-28 </li>
                <li>P </li>
                <li>O </li>
                <li>000005346079</li>
            </ul>
        </td>
    </tr>
</tbody>

 

css

.tooltip{cursor: pointer}
.tooltip .hover_img{margin:5px 5px 0 5px;font-size:16px;opacity:.5;cursor: pointer;}
.tooltip ul{font-size:12px;line-height:1.8;color:#666}

 

js

$(function(){
    $('#theme_tooltip').tooltip({
        items:'[data-photo]',
        content:function(){
            var photo = $(this).data('photo');
            if (photo)
            {
                return '<img src="themeimg/'+photo+'" />';
            }
            
        }
    });
    $( document ).tooltip();
})

 

 

<span id="uploadFileName" style="cursor:pointer" data-toggle="tooltip">

 

// 첨부파일조회
cmFile.list('WTL_LEAK_PS',dataRow.FTR_IDS).done(function(list) {// getCmFile(tblNm,tblSn).done(cmFile)
    $.each(list,function(idx,data){
        var filelistHtml = '<li id="uploadFileName'+idx+'" style="cursor:pointer" data-toggle="tooltip" data-placement="left"></li>';
        $('#filelist').append(filelistHtml);
        $('#uploadFileName'+idx).text(data.realFileNm);
        $('#uploadFileName'+idx).on('click', function(event) { // 파일명 click시
            event.preventDefault();
            cmFile.fn_fileDownload('/cmfile/fileDownload/'+data.fileSn);
        });
        var arrFileType = ['jpg','png','gif'];
        if (arrFileType.indexOf(data.fileType.toLowerCase()) < 0) return; // 이미지 파일이 아니면 return
        $('#uploadFileName'+idx).attr("data-filesn",data.fileSn);
        $('#uploadFileName'+idx).tooltip({
            items:'[data-filesn]',
            content:function(){
                var fileSn = $(this).data('filesn');
                if (fileSn) {
                    return '<img src="/cmfile/showImageFile/'+fileSn+'" />';
                }
            }
        });
    
    }); // $.each()
}).fail(function() { // cmFile.getCmFile()에서 dfd.reject()시 호출됨.
    //console.log('첨부파일 없음');
});