Correct Bootstrap tooltip positioning for top and bottom options

[dgrammatiko]

Bootstrap tooltips don’t behave nicely

This is a response to issue #5130
Moving away from mootools introduce a nice glitch of bootstrap tooltips: their position for the options top and bottom is far from optimal:
On horizontal placement of a label:

And on vertical:

Here are the proposed placement with this PR:
Horizontal:

Vertical:

Tooltips render nicely even on small screens.

There is a change in text alignment on form-horizontal from right to left (the first two pictures illustrate this)

[dgrammatiko]

This is redone now to use only css/less changes. Kudos for this goes to Seth @nternetinspired !
For the vertical (label above the input) the old behavior (before the introduction of this bug) is matched.
Again for the horizontal layout the label moves to the left in order tooltips to operate correctly. Minor different displayed output.

To test this one apply #5113 and #5112

1. Create 2 menus for creating article & creating contact in the front end
2. Login front end
3. Observe that tooltips in both contact form and article are on top of the label!

[nternetinspired]

This is the default in a LTR document, it shouldn't need to be specified.

[nternetinspired]

Did you try setting only labels with the tooltip class to inline-block, as proposed in #5130 (comment), rather than targeting the .control-label?

I'd like to propose an alternative, which should resolve this issue on any form type (vertical, horizontal or any other) and needs to be specified only once;

.control-label .hasTooltip {display: inline-block;}

I believe that would be the optimal solution because;

1. It is tightly scoped, targeting only the issue at hand it can't cause unwanted issues on labels without tooltips, yet works everywhere it should.
2. It leaves the base .control-label class untouched, keeping it on par with Bootstrap defaults.
3. The original appearance will be maintained, with labels right-aligned in horizontal forms, on par with Bootstrap design intention.
4. Requires only a single extra declaration and needs no changes for LTR.

[dgrammatiko]

@nternetinspired I guess I misinterpreted your first comment. Correction on its way. You re right, let’s not mess the bootstrap less file. Shall I put

.control-label .hasTooltip {display: inline-block;}

In forms.less or in every template.less file?

[nternetinspired]

Sorry if I wasn't clear and thanks for making these changes :)

My concern is with altering key properties of a widely used utility class like .form-control. I think that Joomla's .control-label should contain the same properties, and behave the same, as Bootstrap's .control-label so we shouldn't alter it directly IMO.

Your original changes affected that class directly which is why I recommended scoping it with an additional class, so there can be no crossover with Bootstrap (who don't use the .hasTooltip class).

I'm personally not so concerned which file that addition lives in, though forms.less would seem a sensible choice.

[nternetinspired]

+1 Tested successfully.

Thanks for fixing @DGT41 :)

[dgrammatiko]

@smanzi Sergio can you test this one?

[smanzi]

@test success
Without: tooltips misaligned
With: tooltips correctly aligned

[brianteeman]

Thanks - setting RTC

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5137.

[wilsonge]

Merged into staging - thanks!