Angular directive to display a inline help block, quick demo here:
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Angular help block directive

Angular help block directive demo

Quick Demo

A directive that will help you display your help blocks inline. Read more about it here.


  1. Include ng-help-block.js.
  2. Include ng-help-block.css.
  3. Add dm.helpBlock as a dependency to your app.
  4. Profit!

... 5. (optional) Include ngAnimate as a dependency to animate the help block toggling.


Installable via bower:

bower install ng-help-block


See index.html for an example.

<section help-block help-block-title="Here to help" help-block-content="Help content"></section>

Title icon

You can pass a 'title' icon to the directive via the help-block-icon-class attribute. In the example index.html font-awesome is used.

<section help-block help-block-title="{{title}}" help-block-content="{{content}}" help-block-icon-class="fa fa-question-circle"></section>

Further customization

The class expanded will be appended to the directive container when the help block is toggled. To override the directive styles you can customize the following:

  • .hb-row -> the directive container
  • .hb-row.expanded -> the directive container when toggled
  • .hb-title -> the directive title
  • .hb-content -> the directive content

Check out index.css for the full list of CSS props.

About ngmilk

ngmilk is the place to go for fresh front-end articles, with a focus on AngularJS. See more on

Follow @ngmilkrocks on Twitter to stay ahead of the game.