Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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.