Tooltips for mobile browsers

Question

I currently set the title 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. title 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?

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

Answer 2

Here is a CSS only solution. (Similar to @Jamie Pate 's answer, but without the JavaScript.)

We can use the pseudo class :hover, but I'm not sure all mobile browsers apply these styles when the element is tapped. I'm using pseudo class :focus because I'm guessing it's safer. However, when using pseudo class :focus we need to add tabindex="0" to elements that don't have a focus state intrinsically.

I'm using 2 @media queries to ensure all mobile devices are targeted. The (pointer: coarse) query will target any device that the primary input method is something "coarse", like a finger. And the (hover: none) query will target any device that the primary pointing system can't hover.

This snippet is all that's needed:

@media (pointer: coarse), (hover: none) {       [title] {         position: relative;         display: inline-flex;         justify-content: center;       }       [title]:focus::after {         content: attr(title);         position: absolute;         top: 90%;         color: #000;         background-color: #fff;         border: 1px solid;         width: fit-content;         padding: 3px;       }     } 

/*Semantic Styling*/ body {   display: grid;   place-items: center;   text-align: center;   height: 100vh; }  a {   height: 40px;   width: 200px;   background: #fa4766;   color: #fff;   text-decoration: none;   padding: 10px;   box-sizing: border-box;   border-radius: 10px; }  /*Functional Styling*/ @media (pointer: coarse), (hover: none) {   [title] {     position: relative;     display: flex;     justify-content: center;   }   [title]:focus::after {     content: attr(title);     position: absolute;     top: 90%;     color: #000;     background-color: #fff;     border: 1px solid;     width: fit-content;     padding: 3px;   }  }

<a title="this is the Title text" tabindex="0">Tag with Title</a>

Obviously, you'll need to open this on a mobile device to test it. Here is a Pen with the same code.