Add Tooltips throughout Community App to explain Terms and Actions
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)
API Documentation: https://demo.openmf.org/api-docs/apiLive.htm
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
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>