表格单元格工具提示离开屏幕并且不可读

时间:2017-11-20 04:53:27

标签: javascript jquery html css html-table

我为表格的每个单元格设置了工具提示 问题出在屏幕顶部靠近桌子的上排,工具提示文字从屏幕上消失 我已经测试了标题attr及其罚款,当你在屏幕顶部时工具提示文本将位置更改为底部。
但我不能在冠军头衔上做任何风格...

jQuery:

$(document).ready(function() {
    var columns = ['RegNo', 'NAAB_CODE', 'NAME', 'ICC', 'LNM', 
    'FM','MILK','FAT', 'PRO', 'SCE', 'PL', 'DPR', 'PTAT', 'UDC','FLC', 
    'TPI', 'SIRE', 'MGS'];

    $('#myTable tbody tr').each(function() {
        var cells = $('td', this);
        var titleArr = cells.map(function(index) {
            return columns[index] + ' : ' + this.innerHTML;
        });
        cells.each(function(index) {
            var finalTooltip = titleArr.filter(function(i) {
                return index !== i;
            });
            $(this).attr('title', finalTooltip.toArray().join('\n'));
        });
    });
});

$(function () {
    $('[title]').tooltip({
        container: 'body',
        content: function () {
            var element = $(this);
            return element.attr('title');
        }
    });
});

CSS:

.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: white;
text-align: left;
background-color: rebeccapurple;
border-radius: 4px;
white-space: pre;
}

0 个答案:

没有答案