? Success

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
18 Nov 2014

####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:
screen shot 2014-11-18 at 10 38 35

And on vertical:
screen shot 2014-11-18 at 10 49 52

Here are the proposed placement with this PR:
Horizontal:
screen shot 2014-11-18 at 10 39 30

Vertical:
screen shot 2014-11-18 at 10 53 02

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)

avatar dgt41 dgt41 - open - 18 Nov 2014
avatar jissues-bot jissues-bot - change - 18 Nov 2014
Labels Added: ?
avatar brianteeman brianteeman - change - 19 Nov 2014
Category UI/UX
avatar dgt41
dgt41 - comment - 19 Nov 2014

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!
avatar nternetinspired
nternetinspired - comment - 20 Nov 2014

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.
avatar dgt41
dgt41 - comment - 20 Nov 2014

@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?

avatar nternetinspired
nternetinspired - comment - 20 Nov 2014

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.

avatar nternetinspired
nternetinspired - comment - 27 Nov 2014

+1 Tested successfully.

Thanks for fixing @dgt41 :)

avatar brianteeman brianteeman - alter_testresult - 27 Nov 2014 - nternetinspired: Tested successfully
avatar dgt41
dgt41 - comment - 3 Dec 2014

@smanzi Sergio can you test this one?

avatar smanzi
smanzi - comment - 4 Dec 2014

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

avatar smanzi smanzi - test_item - 4 Dec 2014 - Tested successfully
avatar brianteeman
brianteeman - comment - 4 Dec 2014

Thanks - setting RTC

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

avatar brianteeman brianteeman - change - 4 Dec 2014
Status Pending Ready to Commit
avatar brianteeman brianteeman - change - 4 Dec 2014
Labels Added: ?
avatar zero-24 zero-24 - close - 13 Dec 2014
avatar wilsonge wilsonge - close - 13 Dec 2014
avatar wilsonge wilsonge - change - 13 Dec 2014
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2014-12-13 20:50:29
avatar wilsonge
wilsonge - comment - 13 Dec 2014

Merged into staging - thanks!

avatar zero-24 zero-24 - change - 14 Oct 2015
Labels Removed: ?

Add a Comment

Login with GitHub to post a comment