Tooltips for mobile browsers

Question

I currently set the title attribute of some HTML if I want to provide more information:

An 

        

Answer 1

Thanks to @flavaflo for their answer. This works in most cases but if there is more than one title to lookup in the same paragraph, and one opens over the link to another, the unopened link shows through the first. This can be solved by dynamically changing the z-index of the title that has "popped up":

$("span[title]").click(function () {
  var $title = $(this).find(".title");
  if (!$title.length) {
    $(this).append('' + $(this).attr("title") + '');
    $(this).css('z-index', 2);
  } else {
    $title.remove();
    $(this).css('z-index', 0);
  }
});​

Also, you can make both the hover over display and the click display multiline by adding (linefeed) to the title='' attribute, and then convert that to
for the html click display:

$(this).append('' + $(this).attr("title").replace(/\\n/g, '
') + '');