htmlmobile-browser

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

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

Solution

  • 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...