...
...
...
...
User
...
should
...
be
...
able
...
to
...
rollover
...
tooltip
...
indicator
...
to
...
have
...
content
...
explain
...
requirements
...
of
...
the
...
input
...
field
...
it
...
is
...
displayed
...
in.
The tooltip will be dynamically populated with content to be pulled via xml files that are configured by the documentation team. Special tags will be placed in the the documented xml files and pulled from the tooltip to display the information.
Add a tooltip to form fields, which display relevant documentation for that field on focus of the input/select box.
Create a JSON 'lookup table' for the documentation, which is organized by a new field ID.
It is in a basic object map format:
No Format |
---|
h2. *Details* The tooltip will be dynamically populated with content to be pulled via xml files that are configured by the documentation team. Special tags will be placed in the the documented xml files and pulled from the tooltip to display the information. h1. Technical details Add a tooltip to form fields, which display relevant documentation for that field on focus of the input/select box. \\ Create a JSON 'lookup table' for the documentation, which is organized by a new field ID. \\ It is in a basic object map format: {noformat} cloudStack.docs = { <fieldID>: { desc: '<Content of the tooltip>' } } {noformat} |
The
...
tooltips
...
only
...
support
...
fields
...
generated
...
by
...
the
...
createForm
...
(form
...
builder)
...
widget.
...
To
...
show
...
a
...
tooltip
...
for
...
a
...
field
...
on
...
focus,
...
add
...
a
...
new
...
option,
...
'docID'
...
to
...
the
...
field
...
object.
...
For
...
example,
...
for
...
the
...
'name'
...
field
...
on
...
the
...
add
...
volume
...
form,
...
the
...
doc
...
JSON
...
looks
...
like
...
this:
No Format |
---|
\\ {noformat} cloudStack.docs = { // Add volume helpVolumeName: { desc: 'Give the volume a unique name so you can find it later.' }, ... } {noformat} |
To
...
show
...
'helpVolumeName'
...
as
...
the
...
tooltip
...
for
...
the
...
name
...
field,
...
just
...
add
...
that
...
ID
...
in
...
the
...
docID
...
field:
No Format |
---|
\\ {noformat} createForm: { title: 'label.add.volume', desc: 'message.add.volume', fields: { name: { label: 'label.name', docID: 'helpVolumeName', ... }, ... }, {noformat} \ |
--Now
...
the
...
tooltip
...
content
...
will
...
show
...
up
...
when
...
the
...
name
...
text
...
input
...
has
focus,
...
and
...
disappear
...
when
...
blurred.
...
*
...
*
...
Note
...
that
...
this
...
document
...
only
...
specifies
...
how
...
the
...
UI
...
reads
...
the
...
tooltip
...
data.
...
Because
...
the
...
documentation
...
is
...
originally
...
in
...
XML
...
format,
...
a
...
new
...
conversion
...
script
...
needs
...
to
...
be
...
integrated
...
into
...
the
...
build
...
system,
...
that
...
will
...
(re)generate
...
the
...
docs.js
...
file
...
from
...
the
...
relevant
...
XML
...
tags
...
.
...