Javascript 按需生成工具提示

假设我们有一个函数

generateTooltip（）

，它为DOM元素

el

生成并返回工具提示的html。如何按需生成并显示此工具提示（悬停）

背景 我想可以事先生成工具提示，并将预生成的html作为工具提示分配给

el

，但我希望生成是惰性的，因为我的

generateTooltip（I，j）

为一个大表的单元格定义了许多丰富的工具提示

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

编辑

---

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

希望这就是您要查找的内容

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

---

这里有一个fiddle==>

这个答案适用于运行此代码时尚未生成的单元格。（jQuery

.on（）

不支持

悬停

事件。）它还将工具提示放置在相关单元格的外部（下方），其他单元格/内容的前面

$('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.";
}

---

那么为什么不使用引导的工具提示呢？因为引导库太重了，无法实现这一点，而且从我看到的情况来看，它不支持回调来动态生成工具提示。总之，我只想让你知道，你可以自定义bootstrap.js构建，只得到你需要的东西。

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