5

How would I prevent the default action of an <a> on the first click (in order so that a tooltip is shown), then on the second click have the user directed to the value of the href attribute set on the element?

HTML

<a id="second" href="https://www.test.com/"  title="" class="customtooltip c_tool2"   data-original-title="data del toolltip numero 2">tooltip</a> 

Jquery

var t = $('.c_tool2'), b = $('a[href^="http');

b.click(function(e){
  if(t.length > 0){
    e.preventDefault();
    t.tooltip('show');
  } else {
    // on second click direct user to value of href 
  }
});
5
  • 1
    Unrelated, but this seems like a bad UX. When I click a link it should do linky things. I'd use a hover for the tooltip instead, like every other tooltip. Oct 17, 2015 at 21:28
  • The context of this if for Android touch devices, to match the default behaviour of iOS devices and hopefully give a consistent UX. If not the first tap on Android takes the user to the link, they will only see a popover for a split second (which I feel is useless). iOS is first tap shown tooltip, second tap follow link. I've spend a lot of time considering how to make this intuitive and consistent across iOS and Android devices. Oct 17, 2015 at 21:30
  • Fair enough, although for me on iOS clicking a link takes me to the link. Oct 17, 2015 at 21:36
  • What if the link has a tooltip applied? Specifically using Bootstrap v3.3.5 - the-session.co.uk/dev_standalone tap on the 'second tooltip' located in the red header. The behaviour should be first tap tooltip, second tap link direct. Oct 17, 2015 at 21:48
  • Maybe this should rather been seen as an indicator that such “tooltips” are not good UX to begin with.
    – CBroe
    Oct 18, 2015 at 14:36

2 Answers 2

2

Assuming there will be multiple elements, using a common counter will not work. You can use counter on individual element using data-* attribute

Also, the selector to select the anchors is incorrect.

var t = $('.c_tool2'),
    b = $('a[href^="http"]'); // <-- Added "] to make it correct

b.click(function (e) {
    // Get the counter for clicked element
    var clickCount = parseInt($(this).data('count'), 10) || 0;

    // If counter is zero i.e. for the first click
    if (!clickCount) {
        // Update the value of the counter
        $(this).data('count', ++clickCount);
        t.tooltip('show');

        // Prevent the default action of the page redirection
        e.preventDefault();
    }

    // Else, follow the default action
});
1
  • So clickCount++ will assign the zero to it and then it will get incremented. Eventually you coded to make the redirect happens in the third click. you should use ++clickCount here. Oct 17, 2015 at 21:27
1

Try to make use of .data() instead of polluting the global scope with counters,

b.click(function(e) {
  if(!$(this).data("flag")) {
    e.preventDefault();
    $(this).data("flag",true);
    t.tooltip('show');
  } else {
    // on second click direct user to value of href 
  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.