背景

Question

假设我们有一个函数generateTooltip()，它生成并返回DOM元素el的工具提示的html。如何生成此工具提示并显示按需（悬停）？

背景

我想可以预先生成工具提示，并将预生成的html指定为el的工具提示，但我希望生成 lazy 因为我的generateTooltip(i,j)为大表格的单元格定义了许多丰富的工具提示。

（目前我只使用jQuery，但如有必要，会添加一个库。）

修改

添加了

强调以防止进一步的误解。不应在页面加载时预先生成工具提示。

Answer 1

希望这是你正在寻找的......

$("table td.hoverTarget").hover(function(){
    var hovered = $(this);
    var cellIndex = hovered.eq();
    var rowIndex =  hovered.parent().eq();
    if(hovered.children(".tooltipClass").length) {
         hovered.children(".tooltipClass").fadeIn();
    }
    else {
        activeTooltip = generateTooltip(rowIndex,cellIndex);
        hovered.append(activeTooltip);
    }
}, function(){
     var hovered = $(this);
     hovered.children(".tooltipClass").fadeOut();
});

这是一个小提琴==＆gt; FIDDLE

Answer 2

此答案适用于运行此代码时尚未生成的单元格。（jQuery .on()不支持hover个事件。）它还将工具提示放在相关单元格的外部（下方），在其他单元格/内容之前。

$('table').on({
    mouseover: function(){
        var cell = $(this);
        if(cell.data('timeout') !== undefined){
            clearTimeout(cell.data('timeout'));
            cell.removeData('timeout');
            showTooltip(cell, false);
        }
        var timeout = setTimeout(function(){
            showTooltip(cell, true);
        }, 300); // tooltip delay
        cell.data('timeout',timeout);
    },
    mouseleave: function(){
        var cell = $(this);
        if(cell.data('timeout') !== undefined){
            clearTimeout(cell.data('timeout'));
            cell.removeData('timeout');
        }
        showTooltip(cell, false);
    }
}, 'td.hoverTarget');

function showTooltip(cell, show){
    if(show){
        if(cell.children('.tooltipContainer').length == 0){
            var j = cell.parent().children('td').index(cell);
            var i = cell.parent().index();
            var tooltipContent = generateTooltip(i,j);
            if(tooltipContent){
                var tooltip = $('<div></div>').addClass('cellTooltip').append(tooltipContent);
                var ttc = $('<div></div>').addClass('tooltipContainer').append(tooltip);
                cell.append(ttc);
                tooltip.hide();
            }
        }
        cell.find('.cellTooltip').fadeIn();
    } else {
        cell.find('.cellTooltip').fadeOut();                    
    }
}

function generateTooltip(i, j){
    // ...
    return "HTML for large tooltip.";
}

CSS：

table td.hoverTarget>div.tooltipContainer {
    position: relative; /* see https://stackoverflow.com/a/6040258/827280. */
}

table td.hoverTarget>div.tooltipContainer>.cellTooltip {
    background-color: white;
    border: 1px solid black;
    position: absolute;
    top: 30px;
    z-index: 1;
}

按需生成工具提示

背景

修改

2 个答案: