Question

I need to add a mini tooltip to my page and, for odd reasons, can’t use the tooltip provided by jquery, so i’m just going to make my own – except it isn’t working! Here’s the simple code:

$('#nav-about a').click(function(){
     showTooltip('#tooltip-about')
}).hover(function(){
     showTooltip('#tooltip-about')
});

and

function showTooltip(e){
    if( $(e).css('display') =="none" ) {
      $(e).show();
    } else {
      $(e).hide();
    }
    return false;
}

If I hover, the tooltip is shown. but, if I click, it is then hidden. Basically, when I click it reads the css(‘display’) as hidden rather than block. Ideas why?? The only reason i’m doing this is for the iPad display. Most users should see the tip on rollover, but iPad users cannot. Other solutions welcome!!!

Thanks!

UPDATE: here’s what worked. I had my logic wrong :). I simply needed to branch on the userAgent instead of trying to handle two things at once.

var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad){
   $('#nav-about a').click(function(){
    showTooltip('#tooltip-about')
   })
}else{
   $('#nav-about a').hover(function(){
    showTooltip('#tooltip-about')
   });
}

Answer 1

You could reduce the body of your showTooltip() function to…

function showTooltip(e){
    $(e).toggle();
}

You could also lose the $() wrapping, if you are sure that a jQuery object will always be passed. However, it doesn’t hurt to wrap it again, and it gives you the flexibility of passing a selector or native DOM element.

Documentation.

Also, for explictly checking if an element is hidden, you can use…

element.is(':hidden')

Documentation.

Keep in mind that elements with visibility: hidden or opacity: 0 are considered visible by this selector.