Create text with multiple clickable lines

Question

I have a table. For some elements, I want to make it so that when we hover over (or click on) an element, text appears next to it, and the text can have several lines, and some lines can be clicked.

For example, in a table made using the following code, when we hover over 30 , the 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 displayed text to be monday: 10 , tuesday: 10 and wednesday: 10 in turn. And we can click, for example, monday: 10 to open the page or go to another section of the page. title does not allow this.

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

(* this thread did not explain how to embed links in the displayed text *)

Answer 1

You can try tooltips with links

See jQuery example. Example

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

You can try simple tips as shown below with links

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

Answer 2

Here's a solution that combines some aspects of mshameer answer with the bin you provided.

JSBin Solution

This script has two methods for creating a tooltip. The first can be declared in the HTML attribute with the symbol | serving as a line separator, and the second allows you to directly pass an element and its tooltip as a jQuery object. This means that if you don’t need any particular style of styles, you don’t need to leave dreams in the description of the HTML declaration.

HTML:

 <h1 data-over="You have hovered|Over this">Here is a title</h1> <p id="test">TEST</p> 

JavaScript to search for the data-over attribute:

 // Search for text if it simple in the HTML var $dataElements = $("[data-over]"); $dataElements.each(function (index, el) { var $el = $(el); var text = $el.attr("data-over"); if (text) { // Split by "|" text = text.split("|"); createDataOver($el, text); } }); 

JavaScript for manually adding a tooltip:

 // Or provide it yourself. var $testData = $(document.createElement("span")); $testData.text("Click me.").click(function () { alert("Clicked"); }); createDataOver($("#test"), $testData); 

createDataOver does the real job:

 function createDataOver($el, data) { var $holder = $(document.createElement("div")); $holder.addClass("over hidden"); // Check if we provided JQuery or a string array if (data instanceof jQuery) { // Manually make it relatively positioned $el.css("position", "relative"); data.addClass("over-line"); $holder.append(data); } else { data.forEach(function (line) { var $line = $(document.createElement("span")); $line.text(line); $line.addClass("over-line"); $holder.append($line); }); } // append with the hidden class to start $el.append($holder); // Create a closure with a timeout variable // So it doesn't disappear immediately if // we don't want it to! (function closure() { var timeoutCancel = -1; $el.mouseenter(function () { if (timeoutCancel !== -1) { clearTimeout(timeoutCancel); timeoutCancel = -1; } $holder.removeClass("hidden"); }); $el.mouseleave(function () { timeoutCancel = setTimeout(function () { if (timeoutCancel !== -1) $holder.addClass("hidden"); }, 500); }); }()); } 

Warnings

This solution requires the parent hint to be position: relative . It will also not have the same input borders as the title attribute - the display: block h3 element will respond to the mouseenter along its entire line. Since your provided JSBin uses a table, this may not be a problem.

I also tried to control the time using a half-second timeout on the mouse web, so the user can go back to the item during this time to continue browsing, and not immediately lose sight of it.