Feature #10347

Look and Feel for Context Sensitive Help (CSH) tool tips

Added by Steffen Gebert over 2 years ago. Updated 6 months ago.

Status:Accepted Start date:2010-10-20
Priority:Should have Due date:2010-10-23
Assignee:Jens Hoffmann % Done:

0%

Category:Design
Target version:-
Tags:
Votes: 0

Description

Hi,

please provide a screenshot, how the CSH tool tips should look like.

Also we need instructions, how to show the user that there's also a detailed help entry available (was an arrow before).

Thanks

tooltip44-with-link.png - CSH in v4.4 with a link to "more information" (6.6 kB) Ernesto Baschny, 2010-10-22 09:39

tooltip44-withtitle-no-link.png - CSH in v4.4 without a link to "more information" (6.2 kB) Ernesto Baschny, 2010-10-22 09:39

tooltip45-usersettings.png (18.2 kB) Ernesto Baschny, 2010-10-22 10:26

joomla_tooltip.png (20.4 kB) Lars Zimmermann, 2010-10-24 12:50

sencha_extjs_mousetrack.png (54.2 kB) Lars Zimmermann, 2010-10-24 12:50

tooltips_new.png (5.3 kB) Steffen Kamper, 2010-10-25 17:47

History

Updated by Jens Hoffmann over 2 years ago

  • Due date set to 2010-10-23
  • Category set to Design
  • Status changed from New to Accepted
  • Assignee set to Jens Hoffmann
  • Target version set to TYPO3 4.5 LTS

Hy,

I gave that information to Steffen Kamper.
But I will crate a Screen for that at this weekend.

Greez Jens

Updated by Ernesto Baschny over 2 years ago

There are also usability issues with the new tooltips that have to be solved.

See http://bugs.typo3.org/view.php?id=16084

I would suggest:

- mouse over the label => tooltip pops up after 2 secs
- click on the label => focus on input field or check the checkbox
- click in the TOOLTIP => open the popup

This is also how it used to work, when we had a specific link inside the tooltip (the old "arrow" demonstrating that more info was waiting to be clicked). This has to be visualized better, of course.

This is a tooltip in v4.4 which provides "more information" after clicking:

CSH in v4.4 with a link to more information

This is a tooltip in v4.4 which is stand-alone has shouldn't be clickeable, as there is no more information:

CSH in v4.4 without a link to more information

Updated by Ernesto Baschny over 2 years ago

Also consider some other solution instead of the underlines, which I find pretty intrusive, for example in the "User settings" screen:

Updated by Lars Zimmermann over 2 years ago

Hi,

Ernesto is right with suggesting to let the help

  • Pop-up after 0.5 or 1 Second (that it's not that much distracting)
  • Clicking on the labels focuses the respective input-field
  • Clicking in the tooltip opens the detailed help-popup

I also think that it's better to remove the dotted lines completely. Labels should always be sensitive throughout the whole backend, so that it doesn't have to be visualized explicitly.

My suggestion is to have a "mouse-track"-csh-popup. ExtJS has this ability already built-in.


This images shows the same kind of help used in Joomla. I think it's pretty smart with the small triangle to show where the CSH-popup belongs to (it tracks with the mouse all the time and therefore feels very smooth).


This is the ExtJS solution for this:
http://dev.sencha.com/deploy/dev/examples/simple-widgets/qtips.html

Updated by Jens Hoffmann over 2 years ago

Hy,

I would suggest:

  • Add a "arrow-indicator" to the tooltip (like planned in TYPO3 5.0 too)
    http://www.flickr.com/photos/26977893@N05/5042228022/in/set-72157625073683854/
  • A fixed position, if we follow the mouse -> you can't click a link inside of the tooltip :)
  • Always open the Tooltip above the target.
  • Give the tooltip a "tooltip typical" color
  • Keep the dotted lines for 4.5, until we have everywhere tooltips -> then remove them in 4.6
    Currently the people need to learn in this version that the (?) are gone
    but the tooltips are still there. We need to take this change in steps, so do I think.
    • Maybe we could change the color to a (lighter) gray -> And remove the visual focus a bit

Greez Jens

Updated by Steffen Kamper over 2 years ago

I refactored the tooltips and they look now like this:

The behavior now is:
  • delay for show
  • anchor (bubble style)
  • respect end of container
  • stay while mouse is over target
  • stop showing when mouse leaves the target

I removed the mouseenter into the tooltip, click event is on complete label, so this is not needed.

Patch is already pending in core list.

Updated by Steffen Kamper over 2 years ago

last version is committed

Updated by Ernesto Baschny over 2 years ago

This is just a reminder that the new tooltips are in, and that in our last weeks meeting with the design team, Jens wanted to come up with some further optimizations:

  • optimize the overall timings (e.g. reduce the startup time that the tooltip takes to pop up)
  • make a "click" indicator available so that it is clear that the text can be clicked on to get a popup with more information (like we used to have the little "arrow")
  • optimize the styling and maybe positioning

So Jens, could you please provide some description and a screenshot on how you expect it to be. Thanks!

Updated by Ernesto Baschny over 2 years ago

As discussed in our release meeting, we will do the following:

  • reduce delay to 0,5s - 1s (keep in mind that there is still more initial delay because of the ajax request for the text)
  • "on click" on the label should not open the popup but instead select the item that is labeled (e.g. the checkbox = standard browser behaviour)
  • add the old linking arrow back inside the label which is clickeable for the "more information" popup and allow the user to enter the tooltip to click on the link. Is this possible at all?

Steffen volunteered to do this. :)

See http://bugs.typo3.org/view.php?id=16084

Updated by Francois Suter over 2 years ago

There's quite some debate in the community about these new tooltips and in particular how long they stay open. Does the current delay match what Ernesto mentions above (0.5-1s) or is it still longer (it feels longer)? I think that - would really help - beyond the exact length of the delay would be if the bubble help disappeared when clicking anywhere outside of it. I'm fine with having the help pop up quickly, but it currently stays for quite some time and is often over the field where one wants to input something and thus becomes pretty obnoxious. If it disappeared as soon as I clicked elsewhere, it would be very easy to get rid of.

Updated by Helmut Hummel over 2 years ago

Two things about the current status of the tooltips and how I think it could be improved:
  1. The disappear delay if the mouse is not on the label any more is musch to high (as Francois also mentioned). It should disappear almost immediately if the mouse is not hovering the label or the help bubble. I think disappearing if clicking anywhere else should then not be necessary any more
  2. The user needs visual feedback that some label has a tooltip. In tceforms it is pretty clear that he or she should hover the labels but e.g. in the extension manager there are also some texts with tooltips, but it is not clear which ones. It pretty much feels like searching a hidden treasure in an oldschool point and click adventure, which should not be the case in a CMS.

Updated by Stefano Cecere over 2 years ago

a few days until rc1.. i am really sure lots of people won't upgrade to 4.5 because of this new "mandatory" feature

i think we urgently need an option to disable all these tooltips..
well. . the option is already there ("Show help text when applicable" checkbox in user setup)

i am trying to implement this option but it seem more complicate than expected.
if anybody is of the same idea, i am here to help

what do you think?

stefano

Updated by Kay Strobach about 2 years ago

@Helmut -> in TCEForms i - and my customers too - liked the small help icon beside the label ;)

@all how is the visualisation of more content done - i haven't seen any difference between tooltips with and without the posibility to open a new window with more help content.

Updated by Steffen Gebert about 2 years ago

There's an arrow, when detailled description is available.

Updated by Jens Hoffmann 6 months ago

  • Target version deleted (TYPO3 4.5 LTS)

Also available in: Atom PDF