Development:Tooltip: Difference between revisions

Revision as of 13:40, 7 August 2009

Moodle User Interface Guidelines > Tooltip

Problem

You have an item in the user interface, the visual outlook of which does not communicate its function and usage. There is insufficient room in the UI for a more verbose UI element, the function and usage of which would be more clear at a glance.

Context

Forces: factors that affect selection

Solution

Moodle uses tooltips extensively. Tooltips can be simple title elements or YUI tooltips can be used for bigger tooltips.

Common mistakes

Tooltips are best used on functional elements that can be clicked, as an aiding device helping the user understand the concequences of the click. They should be avoided on static, nonfunctional elements, and Help Popups should usually be used instead.

Examples and implementation

Moodle has many command icons, which have tooltips to help users understand/remember their usage.

In Moodle 2.0, YUI tooltips are used to display quick previews of Help Popups.

Further information / Sources

TODO

@@ Line 13: / Line 13: @@
 == Common mistakes ==
-Tooltips are best used on functional elements that can be clicked, as an aiding device helping the user understand the concequences of the click.
+Tooltips are best used on functional elements that can be clicked, as an aiding device helping the user understand the concequences of the click. They should be avoided on static, nonfunctional elements, and [[Development:Help Popups|Help Popups]] should usually be used instead.
 == Examples and implementation ==
-As per [http://www.hillside.net/patterns/writing/patternwritingpaper.htm A Pattern Language for Pattern writing], there should be as few examples here as possible. List one or two here and link to a separate <nowiki>Development:[GuidelineName] Examples and Code Samples</nowiki> page.
-Patterns:
-* [http://www.hillside.net/patterns/writing/patterns.htm#E.3 Running Example]
-* [http://www.hillside.net/patterns/writing/patterns.htm#D.4 Code Samples]
-* [http://www.hillside.net/patterns/writing/patterns.htm#B.2 Optional Elements When Helpful]
-=== Example title ===
 Moodle has many command icons, which have tooltips to help users understand/remember their usage.
 In Moodle 2.0, YUI tooltips are used to display quick previews of [[Development:Help Popups|Help Popups]].
-== (Optional) Related guidelines ==
+== Further information / Sources  ==
-If some other guideline does something similar and could be considered in the same situation, list them here.
+TODO
-== (Optional) Related issues in the tracker ==
-* MDL-99999999 A ticket for fixing something in Moodle to be in accordance with this guideline
-* CREATE: ticket not yet created in the tracker
-* To be decided: description of issue in Moodle that are in conflict with this guideline but a clear decision has not been reached what should be done about it
-Pattern: [http://www.hillside.net/patterns/writing/patterns.htm#B.2 Optional Elements When Helpful]
-== (Optional) Further information / Sources  ==
-Link to sources for this guideline. If you quote from these sources, add a link to this section from the earlier sections with the author name.
-Pattern: [http://www.hillside.net/patterns/writing/patterns.htm#B.2 Optional Elements When Helpful]
-= Additional information to supplement the Guideline template =
-Important points to consider that dictate much of the form of a guideline include: [http://www.hillside.net/patterns/writing/patterns.htm#B.4 Single-Pass Readable], [http://www.hillside.net/patterns/writing/patterns.htm#B.5 Skippable Sections] and [http://www.hillside.net/patterns/writing/patterns.htm#B.5 Findable Sections].
-See also: [http://www.hillside.net/patterns/writing/patterns.htm#C Pattern Naming and Referencing Patterns], [http://www.hillside.net/patterns/writing/patterns.htm#D Patterns For Making Patterns Understandable]

Documentation