Increase the target area for jquery hover

Question

On this page:

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

When the user rolls over 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?

dotty · Answer 1 · 2011-07-11T21:21:37.293

5

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. enter image description here

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.

edited Jul 11 '11 at 21:21

answered Jul 11 '11 at 15:58

dotty

40,405
66
150
195

I came here to say this. Exactly what I would do. Simple, and semantic. – Andy_Vulhop Jul 11 '11 at 16:00
@andy_vulhop Actually I think this is not as simple or semantic as it could be. If you see my answer below you will see no extra mark-up is needed nor do you need to change the hover state. – tw16 Jul 11 '11 at 16:12
@dotty, I'm sorry, I've tried to add a div and apply padding as well as the "aboutName" class, but still I can't seem to get it working. – MLS1984 Jul 11 '11 at 21:08

tw16 · Accepted Answer · 2011-07-11T21:28:34.887

3

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.

edited Jul 11 '11 at 21:28

answered Jul 11 '11 at 16:09

tw16

29,215
7
63
64

For some reason this is still not working. Ive applied the a padding of 10px to the "aboutName" span, but its still flickering. The flickering is happening if the user is hovered on the left side of the given name, not the right, so I triend just a left padding. Still nadad – MLS1984 Jul 11 '11 at 16:22
I noticed that. It seems you have set up your hover oddly. But your script is minified so I cannot see how you are calling the hover. – tw16 Jul 11 '11 at 16:28
I'm working off another developer's code, I just replace the minified code with the uncompressed version. – MLS1984 Jul 11 '11 at 16:33
I am afraid I don't have time to look through it now, but given the other spans on your page work I would look to see if you can spot any differences between the `.aboutName` `span` and the `.link` `span`. – tw16 Jul 11 '11 at 16:43
This is also just as good as dotty's solution. Padding the span works. – Andy_Vulhop Jul 11 '11 at 17:08
I'm sorry, what span are you applying the padding to? I've tried to add it to "aboutName" class, and also add it separately, but still I can't seem to figure it out. – MLS1984 Jul 11 '11 at 18:24

score 0 · Answer 3 · answered Jul 11 '11 at 15:58

0

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

answered Jul 11 '11 at 15:58

ShankarSangoli

69,612
13
93
124

score 0 · Answer 4 · edited Jul 11 '11 at 16:53

0

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.

edited Jul 11 '11 at 16:53

Sparky

98,165
25
199
285

answered Jul 11 '11 at 16:00

Tom Walters

15,366
7
57
74

The elements are applied to divs, so I'm not sure how I could set the hover differently with greater size. – MLS1984 Jul 11 '11 at 17:02

score 0 · Answer 5 · answered Jul 11 '11 at 16:04

0

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.

answered Jul 11 '11 at 16:04

ramono

462
5
16

Increase the target area for jquery hover

5 Answers5