SoftTimur SoftTimur - 25 days ago 11
CSS Question

Make appear a text with several clickable lines

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

You can try tooltips with links

This is an example with JQuery

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

You can try simple tooltips like below with links

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