javascript - 使出现带有多个可单击行的文本

Question

我有一张 table 。对于某些元素，我想做一个效果，当我们将鼠标悬停(或单击)一个元素时，它旁边会出现一个文本，文本可以有几行，有些行可以点击。

例如，在下面代码制作的表格中，当我们将鼠标悬停在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...

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

Answer 1

你可以试试带链接的工具提示

查看 JQuery 示例

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

您可以尝试像下面这样带有链接的简单工具提示

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