要求に応じてツールチップを生成する

Question

DOMエレメントelのツールチップのhtmlを生成して返す関数generateTooltip()があるとします。このツールチップを生成して表示するには、どうすればいいですか？オンデマンドで（ホバー）？

背景

私は1つが事前にツールチップを生成し、elにツールチップとしてHTML事前に生成を割り当てることができたと、私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(); 
}); 

探しているものである

Answer 1

希望はここでフィドルは==>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; 
}