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 *)

Possible duplicate of [How can I use a carriage return in a HTML tooltip?](http://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip) — Dror, Nov 10 '16 at 01:57
Well, that thread did not answer how to insert links in the appearing text... — SoftTimur, Nov 10 '16 at 02:01
the title property accepts a raw string of text..It is not possible to insert html into it...You might be better off creating a tooltip ...see this http://www.w3schools.com/css/css_tooltip.asp — repzero, Nov 10 '16 at 02:04
for links in tooltips - you'll have to work a bit harder :-) see http://stackoverflow.com/questions/18231315/jquery-ui-tooltip-html-with-links — Dror, Nov 10 '16 at 02:05
hmm...would you prefer a custom made tooltip as a solution?..(Just a thought) — repzero, Nov 10 '16 at 02:06
I did not know tooltips before, so I can make it from these examples, thank you... — SoftTimur, Nov 10 '16 at 02:10

mshameer · Accepted Answer · 2016-11-10T04:33:20.143

2

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

edited Nov 10 '16 at 04:33

answered Nov 10 '16 at 02:06

mshameer

3,431
2
14
15

score 1 · Answer 2 · edited May 23 '17 at 11:53

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

Solution JSBin

This script has two methods of creating a tooltip. The first can be declared in an HTML attribute with the | character serving as a line delimiter, and the second allows directly passing the element and its tooltip as a JQuery object. This means that if you don't need any specific click styling, you don't have to leave your HTML-declaration dreams behind.

HTML:

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

<p id="test">TEST</p>

JavaScript for searching by the data-over attribute:

// Search for text if it's 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);

The createDataOver does the real work:

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);
    });
  }());
}

Caveats

This solution requires the tooltip parent to be position: relative. It also won't have the same entry bounds as the title attribute - a display: block h3 element will respond to the mouseenter across its full row. Since your provided JSBin uses a table, this may not be an issue.

I also tried to control for the timing by having a half-second timeout on the mouseleave, that way the user can mouse back over the element in that time to keep viewing it rather than losing view of it immediately.

Make appear a text with several clickable lines

2 Answers2

Caveats