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)

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:

Technical Implementation
Complete details is available here ( 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>




November 15, 2016, 10:37 PM


Your pinned fields
Click on the next to a field label to start pinning.




Ed Cable