Tooltips not appearing correctly on inline labels

[grantjames]

Hi,

I have the following HTML:

<label id="1_label" class="checkbox inline" for="1_select"><input type="checkbox" value="1" id="1_select" /> 1</label>
<label id="2_label" class="checkbox inline" for="2_select"><input type="checkbox" value="2" id="2_select" /> 2</label>

I have applied tooltips to the labels, but when I move the mouse from right to left over them, the tooltips don't disappear. Similarly, if I mouse over the label from the left, the tooltip doesn't appear. If I enter and exit the labels from the top, bottom or right, all works as expected, it's only entering or exiting the label from the left that is the problem. I assumed this was something to do with the checkbox.

Messing around with the CSS, I found that the checkbox has a margin-left of -18px. Removing this causes the tooltips to work correctly, but then the alignment of the checkbox in the label is off.

I tried wrapping the labels in DIVs and applying to tooltip to them instead, but I still got the same behaviour.

I have got the labels laid out as in the bootstrap documentation (in a div with class "controls" inside a "control-group").

Any help would be greatly appreciated. Thanks.

[grantjames]

Ok. I have figured out a work around.

It was indeed something to do with the -18px left margin on the checkboxes that was causing the issue. Not sure exactly what though.

First I tried adding extra padding to the label. I kind of figured that when entering or exiting from the left, the mouse was never actually hovering over the label again since the checkbox was right against the edge of it. So I made the padding-left of the label to be 22px (it's defined as 18px in bootstrap). This gave a 4px area in the left side of the label before the checkbox, and this was better but not ideal. The tooltips would appear/disappear, but not if moving the mouse quickly.

I then noticed that the label had a margin-left of 10px. I decided to take this out, and add an extra 10px onto the padding-left. So now I have padding-left: 32px and margin-left: 0; This works much better and doesn't leave tooltips lying around even if you're an erratic mouse user like me!

It's not an ideal solution, but it works. The only problem is, the first of the line of checkboxes now has the extra padding and isn't fully left aligned, so I settled with giving this one 22px on the left and leaving in the 10px margin-left. It's 4px to the right from where it should be, but it looks ok!