Tooltips for mobile browsers

Question

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

An 

        

Answer 1

You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.

Javascript (done with jQuery):

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

CSS:

.more_info {
  border-bottom: 1px dotted;
  position: relative;
}

.more_info .title {
  position: absolute;
  top: 20px;
  background: silver;
  padding: 4px;
  left: 0;
  white-space: nowrap;
}

Demo: http://jsfiddle.net/xaAN3/