Return to Answer

Thanks to @Diodeus here http://stackoverflow.com/questions/2625210/long-press-in-javascript for this solution:

Thanks to @Diodeus here https://stackoverflow.com/questions/2625210/long-press-in-javascript for this solution:

I noticed that a Q&A was already held on whether to Tooltip or not to here: To tooltip or not to tooltip? So in all fairness, it may help to actually to answer the asker's question without further debate on whether or not to toll-tip.

Here is are some sources for for further reading: What are some alternatives to "hover" on touch-based devices?

I noticed that a Q&A was already held on whether to Tooltip or not to here: To tooltip or not to tooltip? So in all fairness, it may help to actually to answer the asker's question without further debate on whether or not to toll-tip.

Here is are some sources for for further reading: What are some alternatives to "hover" on touch-based devices?

I noticed that a Q&A was already held on whether to Tooltip or not to here: To tooltip or not to tooltip?

So in all fairness, it may help to actually to answer the asker's question without further debate on whether or not to toll-tip.

**1. BY USING TOUCH & HOLD **

When a user long-presses (touches & holds) then show the tips. You can use media queries to detect when a user is on a touch enabled device then implement the solution. Thanks to @Diodeus here http://stackoverflow.com/questions/2625210/long-press-in-javascript for this solution:

JQuery

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
  return false; 
});

and the CSS:

.Element-Being-Pressed {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

By clicking it the first time, the tips are displayed , then the second click will take you to the link.

Thanks to @kevink from CSS Tricks for this. Replace the link moving to right with displaying your tool-tip instead. http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/

HTML:

<p class="parent">
    <a href="http://example.com">
        <span class="animate">Show my animation before leaving</span>
        <span class="double-tap"> </span>
    </a>
</p>

CSS:

.parent { position: relative;}
.parent a { position: absolute;}
.parent .double-tap { display:none; }
.parent .double-tap { display:block; }
a .animate {
    display:block;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.3s ease-in-out 0.2s;
    -o-transition: -o-transform 0.3s ease-in-out 0.2s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0.2s;
    transition: transform 0.3s ease-in-out 0.2s;
}
a:hover .animate {
    -webkit-transform: translateX(52px);
    -moz-transform: translateX(52px);
    -o-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

I noticed that a Q&A was already held on whether to Tooltip or not to here: To tooltip or not to tooltip? So in all fairness, it may help to actually to answer the asker's question without further debate on whether or not to toll-tip.

-

1. BY USING TOUCH & HOLD

This is a more natural interaction model. A lot of apps use this to reveal more information when you click. When a user long-presses (touches & holds) then show the tips. You can use media queries to detect when a user is on a touch enabled device then implement the solution. 

Thanks to @Diodeus here http://stackoverflow.com/questions/2625210/long-press-in-javascript for this solution:

    var pressTimer;
    
    $("a").mouseup(function(){
      clearTimeout(pressTimer);
      // Clear timeout
      return false;
    }).mousedown(function(){
      // Set timeout
      pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
      return false; 
    });
 


.Element-Being-Pressed {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

By this principle, when a user taps once, the tips will appear, and when they tap twice, they will navigate to the destination of the link. This sounds complicated, especially if users are not informed of this behavioural pattern before-hand.

Thanks to @kevink from CSS Tricks for this. Replace the link moving to right with displaying your tool-tip instead.

http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/

<p class="parent">
    <a href="http://example.com">
        <span class="animate">Show my animation before leaving</span>
        <span class="double-tap"> </span>
    </a>
</p>
 


.parent { position: relative;}
.parent a { position: absolute;}
.parent .double-tap { display:none; }
.parent .double-tap { display:block; }
a .animate {
    display:block;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.3s ease-in-out 0.2s;
    -o-transition: -o-transform 0.3s ease-in-out 0.2s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0.2s;
    transition: transform 0.3s ease-in-out 0.2s;
}
a:hover .animate {
    -webkit-transform: translateX(52px);
    -moz-transform: translateX(52px);
    -o-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}