Question

Working live URL showing problem:

http://69.24.73.172/demos/newDemo/test.html

The HTML:

<div class="small-vote">
    <a href="#" class="s plus-one bubble" bubble=":)&lt;br /&gt;Vote this comment up&lt;br /&gt;if you like it!"></a>
    <a href="#" class="s minus-one bubble" bubble=":(&lt;br /&gt;Vote this comment down&lt;br /&gt;if you disagree with it!"></a>
</div>

This is a problem on all major browsers. If the mouse enters the bottom halfish of the anchor link, it’s all fine. It highlights it, popup comes up, and you can click the link.

If you enter the top half of the link, it lets you click it until the mouse is moved even 1 pixel, then the link deactivates and you have to exit and re-enter the area to click on it.

It’s enough of a problem to make the anchor links pretty unusable.

The CSS

a.bubble:hover
{
    background-color:Red;
}
.s{
    background-image:url('../images/sprites.png');
    background-repeat:no-repeat;
}
.plus-one
{
    display:block;
    width:20px;
    height:16px;
    background-position: -46px -135px;
    float:left;
    margin-right:1px;
    margin-top:1px;
}
.minus-one
{
    display:block;
    width:20px;
    height:16px;
    background-position: -67px -135px;
    float:right;
    margin-left:1px;
    margin-top:1px;
}
.minus-one:hover
{
        background-position: -67px -153px;
}
.plus-one:hover
{
    background-position: -46px -153px;
}

As a reference, when the popup box is taken off the anchor link, the links behave properly. I’m using jQuery Bubble Popup v.2.3.1.

Answer 1

That’s because your tooltip is over the link! Check out the padding, maybe add some z-index to put it behind the link level =)