使html表像mac日历

Question

我正在制作一个html表格，并且有一栏显示评论 评论有时太长，无法在小表格中显示，
所以我想在像日历这样的列中添加一个效果，就像我一样 点击单元格，内容将弹出。

任何人都可以告诉我可以使用哪种技术？

Answer 1

你可以使用bootstrap来解决这个问题，特别是bootstrap popovers。

首先，在您的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>

Answer 2

有一系列解决方案，从HTML元素中的简单“title”属性开始，通过jQuery等javascript库进行弹出控制。

显示了简单的解决方案：

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

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

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

Answer 3

您可以使用jQuery工具提示来实现这一目标。

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

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