Page History

h2. *High level requirement*

User should be able to rollover tooltip indicator to have content explain requirements of the input field it is displayed in.

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:\\

<pre>{noformat}
cloudStack.docs = {

&nbsp;  <fieldID>: {

&nbsp;&nbsp;&nbsp;    desc: '<Content of the tooltip>'

&nbsp;  }
}
{noformat}\\
</pre>

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:
\\

{noformat}
cloudStack.docs = {

&nbsp;  // Add volume

&nbsp;  helpVolumeName: {

&nbsp;&nbsp;&nbsp;    desc: 'Give the volume a unique name so you can find it later.'

&nbsp;  },\\

&nbsp;
  ...
}
{noformat}\\

To show 'helpVolumeName' as the tooltip for the name field, just add that ID in the docID field:
\\

{noformat}
createForm: {

&nbsp;  title: 'label.add.volume',

&nbsp;  desc: 'message.add.volume',

&nbsp;  fields: {

&nbsp;  name: {

&nbsp;&nbsp;&nbsp;    label: 'label.name',

&nbsp;&nbsp;&nbsp;    docID: 'helpVolumeName',

&nbsp;&nbsp;&nbsp;    ...

&nbsp;  },

&nbsp;  ...
},
{noformat},\\

\--Now the tooltip content will show up when the name text input has

&nbsp; 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.<!--  /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Table Normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-priority:99; 	mso-style-parent:""; 	mso-padding-alt:0in 5.4pt 0in 5.4pt; 	mso-para-margin:0in; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:11.0pt; 	font-family:"Calibri","sans-serif"; 	mso-ascii-font-family:Calibri; 	mso-ascii-theme-font:minor-latin; 	mso-hansi-font-family:Calibri; 	mso-hansi-theme-font:minor-latin; 	mso-bidi-font-family:Arial; 	mso-bidi-theme-font:minor-bidi;} -->cloudStack.docs = {

&nbsp; <fieldID>: {

&nbsp;&nbsp;&nbsp; desc: '<Content of the tooltip>'

&nbsp; }

}