製作html表格，如mac日曆

Question

我正在製作一個html表格，並且有一列顯示評論。
評論有時太長，不能顯示在一個小表格單元中，所以我想添加一個效果到像mac日曆這樣的列，當我點擊單元格時，內容會彈出。

任何人都可以告訴我可以使用哪種技術？

Answer 1

您可以使用引導來解決這個問題，特別是引導popovers。

首先，在你的script.js或script標籤包括...

$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 

在HTML中你的頭標記，包括...

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

爲了使您的酥料餅，做這個。

<a href="#" title="New Event Popover" data-toggle="popover" data-placement="left" data-content="These are your events">Click</a> 

Answer 2

您可以使用jQuery的工具提示來實現這一目標。

<a href="#" data-toggle="tooltip" title="Calendar!">Calendar data here</a> 

---

<script> 
$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script> 

Answer 3

有從簡單的「標題」屬性的HTML元素內開始彈出經由像jQuery JavaScript庫控制此解決方案的範圍內。

簡單的解決方案所示：

<html... 
    <table... 
    <tr... 
     <td><ul><li title="New Event on date 2016-Apr-10.">New Event</li></ul></td> 

這有其侷限性：主要是文本只格式化爲簡單的段落和瀏覽器決定如何顯示它。只有當您將鼠標懸停在列表項上方時纔可用，而不是當您單擊時。

這是一個很好的，簡單的解決方案，用於更好，更復雜的解決方案。