如何把一個彈出框，每個單元格在一個表中，當鼠標移動到細胞

Question

喜歡的東西每個jQuery的..

$('#id').each(function(index) { 
    $(this).addClass('item-' + index); 
}); 

Answer 1

如果你想要把同一類的所有單元格在一個表中使用這樣的：

$('#tableId td').each(function(index) { 
    $(this).addClass('classname'); 
}); 

這樣，您將在遍歷表的所有TD兒童與＃ TABLEID。

，並且可以使用jQueryUI的這種方式添加自定義內容提示：

$('#tableId td').each(function(index) { 
    $(this).tooltip({ 
     content: function() { 
      var contentHTML = ""; //Text or html you want to show in the tooltip 
      return contentHTML;  
     } 
    }); 
}); 

Answer 2

的id應該是同一個文檔中唯一的，所以最簡單的方法適應你的代碼是由被稱爲id興業類來更改代碼中的每一個id='id'這將是class='id'，然後用$('.id')代替：

$('.id').each(function(index) { 
    $(this).addClass('item-' + index); 
}); 

希望這有助於。

Answer 3

如果你想創建一個表中的每個元素與下面的代碼嘗試將鼠標懸停在彈出窗口中，

HTML：

<table border="1"> 
<tr> 
<th>Name</th> 
<th>Age</th> 
</tr> 
<tr> 
<td>Aryan</td> 
<td>26</td> 
</tr> 
<tr> 
<td>Dia</td> 
<td>22</td> 
</tr> 
</table> 

的Javascript：

$(document).ready(function() { 
$(document).on('mouseover', 'th,td', function() { 
    var offset = $(this).offset(); 
    var html = '<div class="popup">' + $(this).text() + '</div>'; 
    $('.popup').remove(); 
    $(html).insertBefore('table'); 
    $('.popup').css({ 'top': offset.top, 'left': offset.left }).fadeIn(); 
}); 

}） ;

CSS：

table{border-collapse:collapse} 
th,td{padding:10px} 
.popup{display:none;position:absolute;background:#ccc;border-radius:6px;padding:8px;} 

此示例代碼創建在其上懸停的文本的彈出窗口。

https://jsfiddle.net/zmd2ct54/

Answer 4

謝謝大家...... 我用這個和它的工作...

$(document).ready(function() { 
    $('.results-info-hover').each(function() { 
     var $this = $(this); 
     $this.popover({ 
      container: 'body', 
      trigger: 'hover', 
      placement: 'bottom', 
      html: true, 
      content: $this.find('.results-info').html(), 

     }); 
     }); 
    });