? ? Success

User tests: Successful: Unsuccessful:

avatar coolcat-creations
coolcat-creations
31 Oct 2017

This PR gives a visible indicator to the labels that have a popover.
Also it removes the "hand" cursor from labels that don't have a popover because this causes a confusion if the popover is just not working or if there is no help text available.

Summary of Changes

Isis and Protostar:
Remove Hand Cursor from labels
Add Pointer Cursor to labels
Add help cursor to labels with popover
Add help icon to labels with popover

Testing Instructions

Just see if it looks ok for you.
I actually wonder why this has not been made yet, if there is a reason for it, please just close the PR.

Expected result

Labels that have a help text available will appear like that:
grafik

grafik

Documentation Changes Required

No

avatar coolcat-creations coolcat-creations - open - 31 Oct 2017
avatar coolcat-creations coolcat-creations - change - 31 Oct 2017
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 31 Oct 2017
Category Administration Templates (admin) Front End Templates (site)
avatar coolcat-creations coolcat-creations - change - 31 Oct 2017
Labels Added: ?
avatar franz-wohlkoenig franz-wohlkoenig - test_item - 31 Oct 2017 - Tested successfully
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 31 Oct 2017

I have tested this item successfully on bce992e


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

avatar infograf768
infograf768 - comment - 31 Oct 2017

?
I love it.
Maybe change a bit the size (for sure) and colour, i.e

.hasPopover::after, .control-label .hasTooltip::after {
    content: "E";
    font-family: IcoMoon;
    font-size: 0.8rem;
    margin-left: 0.2rem;
    color: #1a3867;
}

to get
screen shot 2017-10-31 at 07 40 21

I have been suggesting exactly this also for 4.0 to be able to cope with useful missing tips (alias being a good example).

In 4.0 though, would that create issues for a11y?

avatar coolcat-creations
coolcat-creations - comment - 31 Oct 2017

For j4 we have to do it completely different. I'm quite sure something accessible is already considered for J4 and I make sure we include it in the new template.

Regarding colour: I made it extra quite small and light because in Joomla 3 still a lot of labels have some (unneeded) helptext and it looks quite massive to have them all in blue. It's not brighter then the gray of inactive drop downs so it should be ok? Any other opinions about the colour?

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 31 Oct 2017

I'm in favor of grey Color in @coolcat-creations proposal.

avatar C-Lodder
C-Lodder - comment - 31 Oct 2017

You appear to have modified the BS grid in the LESS file

avatar coolcat-creations
coolcat-creations - comment - 31 Oct 2017

I did not, but i compiled the protostar css with the less compiler in the template manager. Wrong? It was not generated by generatecss.php

avatar C-Lodder
C-Lodder - comment - 31 Oct 2017

There must be a bug somewhere or maybe it was from a previous commit from someone else, not sure. But it should be done with generatecss.php

avatar coolcat-creations
coolcat-creations - comment - 31 Oct 2017

Somehow it did not compile it in the first moment (for protostar). Seems the lesscompiler in template works different then generatecss.php :) Now it should be ok. Thanks for seeing this @C-Lodder

avatar infograf768
infograf768 - comment - 31 Oct 2017

Will not fight on the colour, but the size is still much too small imho.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 31 Oct 2017

Size is to small, true.

avatar dgrammatiko
dgrammatiko - comment - 31 Oct 2017

Since J4 implementation was mentioned here, here is what we've done so far (open with Chrome!) https://codepen.io/dgt41/pen/dzGJbK

which is based on: https://inclusive-components.design/tooltips-toggletips/

The main difference is that we're not using the question mark but the 'i' icon instead (and also we don't require some font library!)

avatar coolcat-creations
coolcat-creations - comment - 31 Oct 2017

Can't see anything in the codepen but to be a bit more consistent to the next J Version i changed it to an i and increased the icon size.

grafik

avatar dgrammatiko
dgrammatiko - comment - 31 Oct 2017

You need to use either chrome or safari (no polyfill used for custom elements), but anyhow this is what should be there
screen shot 2017-10-31 at 14 55 02

avatar coolcat-creations
coolcat-creations - comment - 31 Oct 2017

@dgt41 ok in chrome I see it - so I guess the latest commit is ready to be tested ?

avatar Quy
Quy - comment - 10 Nov 2017

I find the icons very distracting and overwhelming since the majority of the labels have them.

avatar coolcat-creations
coolcat-creations - comment - 10 Nov 2017

It will be easier with them to remove the not needed desc for following versions though

avatar brianteeman
brianteeman - comment - 10 Nov 2017

Those useless strings have been removed in j4

avatar coolcat-creations
coolcat-creations - comment - 11 Nov 2017

@brianteeman ah - thought it was already for 3.7.x why can't we remove them already now? can that be merged in 3.9.x too?

avatar brianteeman
brianteeman - comment - 11 Nov 2017

Unfortunately the language policy in 3.x doesn't allow for that which is why it was done for j4

avatar coolcat-creations
coolcat-creations - comment - 12 Nov 2017

I understand, but does not prevent us to help people to see that there are tooltips at all? Will we get it merged?

avatar brianteeman
brianteeman - comment - 12 Nov 2017

Currently everything has a tooltip - even if it is useless

avatar coolcat-creations
coolcat-creations - comment - 18 Nov 2017

Does not apply for extensions. If an extension has no tooltip the cursor still changes on hover and that's imho a bad ux. So better to display the hint.

avatar pjasmits
pjasmits - comment - 8 Sep 2018

I have tested this item successfully on 146e717

Patch gives the expected result


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

avatar pjasmits pjasmits - test_item - 8 Sep 2018 - Tested successfully
avatar coolcat-creations
coolcat-creations - comment - 8 Sep 2018

Thank you! @pjasmits

avatar BurtNL
BurtNL - comment - 8 Sep 2018

I have tested this item successfully on 146e717

I like it and it's useful, to my opinion.


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

avatar BurtNL BurtNL - test_item - 8 Sep 2018 - Tested successfully
avatar franz-wohlkoenig franz-wohlkoenig - change - 8 Sep 2018
Status Pending Ready to Commit
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 8 Sep 2018

Ready to Commit after two successful tests.

avatar hamby
hamby - comment - 8 Sep 2018

I have tested this item successfully. Source (coolcat-creations:show_popovers)

  • Mac:Safari 11.1.2
  • Mac:Chrome 68.0.3440.106 (Desktop)
  • Mac:Chrome 68.0.3440.106 (Mobile Simulation)

Further input: Normally every field in Joomla has an description. Therefore normally every Field has the "question-mark-icon". This icon need space and is on costs of a clean interface. Maybe a good idea to keep the old solution.

avatar brianteeman
brianteeman - comment - 8 Sep 2018

For Joomla 3 where every field has a description (thankfully we fixed that in Joomla 4) I don't see the need for this

avatar coolcat-creations
coolcat-creations - comment - 8 Sep 2018

For other extensions that have tooltips and you don't see on which field there are explanations.

avatar mbabker mbabker - change - 15 Sep 2018
Status Ready to Commit Pending
avatar mbabker
mbabker - comment - 15 Sep 2018

RTC removed, as pointed out in #18452 (comment) this is going to change the display for every template being compiled with the Bootstrap files used in core. To me this is an OK change to make for the core templates, but not one that we should force onto all templates.

avatar Quy
Quy - comment - 26 Apr 2020

In J4, description is displayed and not in a popover. I see no point in adding this to J3 for it to be obsolete in J4.

avatar coolcat-creations
coolcat-creations - comment - 26 Apr 2020

This PR is 2 years old :-) / you are right that we don’t need it for J4 - but for Joomla 3 it still would increase usability. A new user can’t know that some labels (also 3rd Party components) have tooltips... since some J3 Sites will exist for at least 2 years it would be great to have this UX addition.

avatar micker
micker - comment - 26 Apr 2020

Yes for me its important to add this... More usefull

avatar brianteeman
brianteeman - comment - 26 Apr 2020

It is 2 years old because the comments of @mbabker were not addressed

avatar coolcat-creations
coolcat-creations - comment - 26 Apr 2020

@brianteeman thank you - will look into this

avatar Quy
Quy - comment - 4 May 2021

Closing as no new features in J3 and this will be obsolete in J4. Thank you for your effort.

avatar Quy Quy - close - 4 May 2021
avatar Quy Quy - change - 4 May 2021
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2021-05-04 21:19:40
Closed_By Quy
Labels Added: ?

Add a Comment

Login with GitHub to post a comment