Increase the target area for jquery hover

On this page:

http://thegoodgirlsnyc.com/index.html?page=about

When the user rolls over开发者_如何学JAVA the names of the team members, a tooltip comes up. Unfortunately if the user is not directly on the text it flashes. Is there any way to increase the target area to a wider area around the text so the flashing does not occur?

Put the text in a div and give it padding. Then put the .hover event on the div rather than the text.

The problem is actullay caused by .toolTipText. The div are being overlayed half way across the text which is being hovered. You can see this by the screenshot attached.

My solution would be something like this.

<div class='hoverable'>
    <span>The text</span>
    <div class='tooltip' style='display:none;'>The tooltip crap</div>
</div>

and use some jQuery like this

$(".hoverable").hover(function(){
    $(this).find("div.tooltip").show();
},function(){
    $(this).find("div.tooltip").hide();
});

Then style it so that the .tooltip is sitting relative to the .hoverable div.

Assuming that is your web page you linked to, I would not put in extra markup such as divs because the text is already contained in their own spans. Just add padding to each span instead. Much more semantic then bringing in extra elements for styling and no need to change your hover event.

Edit: The main issue is your tooltip has been set to appear in the center instead of to the right like in your previous spans. This is causing the tooltip div to cut off half of the text.

To fix this change the javascript for all of the About Team Links:

From showToolTip('#lRG', '#dRG', 10, 'center');

to showToolTip('#lRG', '#dRG', 10, 'right');

This will cause the tooltips to show up at the end of the name instead of in the middle, and therefore stopping the tooltip div cutting the text in half.

You can have some delay before you show the tooltip or giving some padding to the anchor which will basically increase the hover area.

That's a work for CSS, you need to put a display: block; to the element so you can add width and height. My choice would be add padding, so the elements can have different widths and heights. But you need to display block first.

You can either increase the width/height of your elements or wrap them in separate elements with greater size and then set the hover event on those wrappers. I would suggest the latter.