制作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> 

这有其局限性：主要是文本只格式化为简单的段落和浏览器决定如何显示它。只有当您将鼠标悬停在列表项上方时才可用，而不是当您单击时。

这是一个很好的，简单的解决方案，用于更好，更复杂的解决方案。