1

Working live URL showing problem:

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

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

Community
  • 1
  • 1
Tom Gullen
  • 61,249
  • 84
  • 283
  • 456

1 Answers1

2

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 =)

Elements with border

Community
  • 1
  • 1
  • Thanks! a.bubble { position:relative; z-index:9999; } This doesn't work though :( The z-index of the popup is only 100 – Tom Gullen Mar 09 '11 at 23:11
  • Change the class "jquerybubblepopup", change margin: 0px; to margin-top: -10px; to move it a bit .jquerybubblepopup { width: auto; height: auto; margin-top: -10px; [...] } –  Mar 09 '11 at 23:27
  • @Michael, thanks, works great! But is there any way to position it also so it is nearer? IE bring it's blue box in at the bottom – Tom Gullen Mar 10 '11 at 18:45
  • That is to say, I would like it if it could be back in it's original position, and have it's exterior padding removed to fix the bug – Tom Gullen Mar 10 '11 at 18:51