Make appear a text with several clickable lines

Question

I have a table. For certain elements, I want to make an effect such that when we mouseover (or click on) an element, a text appears next to it, and the text could have several lines and some lines can be clickable.

For example, in the table made by the following code, when we mouseover 30, a text appears

<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

However, I would like the appearing text to be monday: 10, tuesday: 10 and wednesday: 10 line by line. And we can click on e.g., monday: 10 to open a page or move to another section of the page. title does not permit of this.

Does anyone know how to realise this? We could use JavaScript, CSS...

(* this thread did not explain how to insert links in the appearing text *)

Answer 1

You can try tooltips with links

See the JQuery Example

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

You can try simple tooltips like below with links

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