User tests: Successful: Unsuccessful:
####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:
Here are the proposed placement with this PR:
Horizontal:
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)
Labels |
Added:
?
|
Category | ⇒ | UI/UX |
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;
@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?
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.
Thanks - setting RTC
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5137.
Status | Pending | ⇒ | Ready to Commit |
Labels |
Added:
?
|
Status | Ready to Commit | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2014-12-13 20:50:29 |
Merged into staging - thanks!
Labels |
Removed:
?
|
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