制作像mac日历一样的html表格答案

【问题标题】：Make html table like mac calendar制作像mac日历一样的html表格
【发布时间】：2016-12-29 14:31:38
【问题描述】：

我正在制作一个 html 表格，并且有一列显示 cmets。
评论有时太长而无法在小表格单元格中显示，
所以我想给列添加一个效果，比如 mac 日历，当我
单击单元格，将弹出内容。

谁能告诉我可以使用什么技术？

【问题讨论】：

【解决方案1】：

您可以使用引导程序来解决这个问题，尤其是引导程序弹出窗口。

首先，在您的script.js 或script 标签中包含...

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

在您的 html 的 head 标签中，包括...

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

【讨论】：

【解决方案2】：

有一系列解决方案，从 HTML 元素中的简单“标题”属性到通过 jQuery 等 javascript 库控制的弹出窗口。

简单的解决方案如图：

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

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

这是一个很好、简单的解决方案，可以帮助您获得更好、更复杂的解决方案。

【讨论】：

【解决方案3】：

您可以使用 jQuery 工具提示来完成。

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

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

【讨论】：

这没有提供用于解决问题的代码。