Mobile web-design: alternative to "title" atribute in HTML tags

Question

Is there an alternative for the title="" attribute in HTML tags that works in mobile browsers?

Answer 1

A CSS only alternative is to use the :active state and :after or :before pseudo element and use the title attribute for the content, example:

.element:active:after{
  content:attr(title);
}

you may want to style it so simulate a tooltip!

Answer 2

There's no alternative because the title attribute triggers a tooltip on hover but you can't hover in mobile browsers (for smartphones). An alternative action to hover in mobile browsers can be hold. So you can use jquery to do something like:

HTML:

<div id="x" title="Hello World">Hold this element</div>

jquery:

$('#x').tooltip({trigger: 'manual'});
$('#x').on("taphold",function(){
    $(this).tooltip('show');
});

NOTE: jquery, jquery mobile and bootstrap (js and css) are required for this example. You can use any other css library or make the tooltip yourself if you want, but you get the idea...