Code Blender

An atomic Middleman partials library

Popover contextual information

  2. Molecule
  3. Popover contextual information

Uses the dismissible markup over the button tag, coupled with the focus trigger this will close pop-ups on a click away.

When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

Default Popover Auto positioned popover 

= codeBlender "popover", "molecule", { content:   "Default",
                            placement: "auto top",
                            popBody:   "Popover Body Copy",
                            popTitle:  "Popover Default" }

<div popover-directive>
<a class='btn btn-default popMe' data-content='Popover Body Copy' data-placement='auto top' data-toggle='popover' href='javascript:;' role='button' tabindex='0' title='Popover Default' type='button'>
Default

</a>

</div>

Popover Right 

= codeBlender "popover", "molecule", { content:   "Right",
                            placement: "right",
                            popBody:   "Popover Body Copy",
                            popTitle:  "Popover Right" }

<div popover-directive>
<a class='btn btn-default popMe' data-content='Popover Body Copy' data-placement='right' data-toggle='popover' href='javascript:;' role='button' tabindex='0' title='Popover Right' type='button'>
Right

</a>

</div>

Resources Useful websites and tutorials

Title URL
Bootstrap popover http://getbootstrap.com/javascript/#popovers
Angular UI popover https://angular-ui.github.io/bootstrap/#/popover
Click over http://www.leecarmichael.com/bootstrapx-clickover/examples.html