使用多个可单击的行显示文本

Question

我有一张桌子.对于某些元素,我想要产生一种效果,当我们鼠标悬停(或点击)一个元素时,它旁边会出现一个文本,文本可能有几行,有些行可以点击.

例如,在以下代码生成的表格中,当我们鼠标悬停时30,会出现一个文本

<table style="width:100%">
  <tr>
    <th>First Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td><span title="monday: 10; tuesday: 10; wednesday: 10">30</span></td>
  </tr>
</table>

JSBin

不过,我想出现的文字是monday: 10,tuesday: 10和wednesday: 10一行行.我们可以点击例如,monday: 10打开页面或移动到页面的另一部分.title不允许这样做.

有谁知道如何实现这一点？我们可以使用JavaScript,CSS ......

(*此主题没有解释如何在出现的文本中插入链接*)

Answer 1

您可以尝试带有链接的工具提示

请参阅 JQuery 示例

https://codepen.io/jamilhijjawi/pen/lIwbK

您可以尝试使用下面的简单工具提示和链接

http://www.w3schools.com/css/css_tooltip.asp