Misaligned tooltips

[dgrammatiko]

Based on the comments from @Hackwar and @smanzi #5113 and #5112 we get wrong placement of tooltips on the labels:

[dgrammatiko]

This might help http://www.bootply.com/61675

[dgrammatiko]

Quick and dirty solution here:
line 655 media/jui/less/forms.less: width to auto

  // Float the labels left
  .control-label {
    float: left;
    width: auto;
    padding-top: 5px;
    text-align: right;
  }

Seems to fix the placement, but the minor drawback is that we loose the right alignment:

[dgrammatiko]

[dgrammatiko]

@nternetinspired Seth, can I ask for your expertise here? You have any good trick for this one?

[nternetinspired]

Labels are, by default, block-level elements so they fill the width of their container. The tooltip is centred over the label element.

Really, this is a result of poor design, applying a tooltip to a label in a horizontal form wasn't envisaged by the Bootstrap team, clearly, and for good reason I'd say.

The technical fix (untested) is to force labels with tooltips, inside horizontal forms to be inline-block elements instead, eg:

.form-horizontal .hasTooltip {display: inline-block;}

However, I would suggest that, in this instance, a far better solution is to remove the tool-tips from those labels. Does anyone require a tool-tip explaining 'name, 'subject', 'email' or 'message' in the context of a contact form? No, they don't.

[nternetinspired]

Quick test in dev tools:

[infograf768]

In many places the labels do need the tip though.

[dgrammatiko]

#5137 this might be a dirty hack, but I think will solve the problem. It moves the tooltip to the left (16 pix right from left margin). All it needs is some hack to restore the inline label to be right aligned again!

Thanks @nternetinspired for the quick solution. I think your approach is even better, less code. I’ll test it and i'll report here.

[nternetinspired]

In many places the labels do need the tip though.

Agreed. Just not here…

[nternetinspired]

Thanks @nternetinspired for the quick solution. I think your approach is even better, less code. I’ll test it and i'll report here.

No worries. Yes, I always prefer solutions that require less code too :)

[dgrammatiko]

@nternetinspired Seth I updated #5137 to reflect your solution. Thanks again!