at. at. - 11 months ago 86
HTML Question

Tooltips for mobile browsers

I currently set the

attribute of some HTML if I want to provide more information:

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>

Then in CSS:

.more_info {
border-bottom: 1px dotted;

Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip.
attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?


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('<span class="title">' + $(this).attr("title") + '</span>');
  } else {


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

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