Add Tooltips throughout Community App to explain Terms and Actions

Description

Context-sensitive help in the form of tooltips will be very helpful for end users unfamiliar with the terminology and actions permitted in the Mifos X Community App.

Our goal behind the tooltips is to provide a quick reference within the context of the Community App to the explanation of that term or action found in the User Manual, API Documentation or Glossary.

Design of Tooltip
See attached screenshots for examples:

  • Term: terms should have a small question mark icon that when hovered over will display the tooltip definition

  • Action/Icon/Button: Visual icons/actions/buttons don't require a question mark icon and should simply have their tooltip displayed upon hover-over

Resources for finding content (definition/explanation to put in tooltip)

We plan on implementing many of these for Google Code-In: For each term/action that requires a tooltip the work will require three steps:

1) Identify the definition or explanation by locating it in the user manual or relevant documentation
2) If appropriate, ensure this term is in the Glossary along with its definition
3) Implement the tooltip by actually coding it in into the AngularJS Community App

Status of the tooltips and a detail list of tooltips to be implemented can be found in this Google Sheet: http://goo.gl/3JvLSk

Technical Implementation
Complete details is available here (http://angular-ui.github.io/bootstrap/#/tooltip). Please go through this link to see the live example working.

  • For Actions <a class="btn btn-primary" ng-href="#/loanaccount/5296/approve" tooltip="Approve"><i class="icon-ok icon-white"></i></a>

  • For Icons <i class="icon-stop statuspending" tooltip="Submitted and pending approval" tooltip-placement="right" ng-hide="loanaccount.inArrears"></i>

  • For Term <i class="icon-question-sign" tooltip="Text to be added"></i>

Environment

None

Status

Assignee

Unassigned

Reporter

Ed Cable

Implementation Priority

None

Story Points

None

Team

Core

50% Estimate

None

90% Estimate

None

productboard URL

None

Affects versions

Priority

Minor

Epic Name

Tooltips for Mifos X Community App
Configure