Child pages
  • UI - Dynamic Tooltip
Skip to end of metadata
Go to start of metadata

High level requirement

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

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.

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:

cloudStack.docs = {
  <fieldID>: {
    desc: '<Content of the tooltip>'
  }
}

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:

cloudStack.docs = {
  // Add volume
  helpVolumeName: {
    desc: 'Give the volume a unique name so you can find it later.'
  },
  ...
}

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

createForm: {
  title: 'label.add.volume',
  desc: 'message.add.volume',
  fields: {
  name: {
    label: 'label.name',
    docID: 'helpVolumeName',
    ...
  },
  ...
},

--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.