Bootstrap popovers

Bootstrap 3 comes with pretty awesome built-in popover functionality. The library takes care of the minutia that makes coding popovers from scratch a pain. It also does away with any temptation to use an ad hoc approach for popovers.

Here are three examples of popovers:

  1. Example one is pure bootstrap and uses the trigger: 'focus' option. This results in a popover that toggles as its invoking element gains, or loses, focus. Other trigger options are: click, hover, and manual.
  2. Example two makes use of the shown.bs.popover event, and some heavy handed selectors, to hide the popover when another is shown elsewhere on the page. This is often preferable as the focus trigger used by example one will hide the popover if the invoking element loses focus for any reason including the popover itself gaining focus.
  3. Example three is effectively the same as example two, but it uses simpler selectors to determine if it should be hidden when the shown.bs.popover event is fired.

There's lots more you can do with bootstrap popovers. Complete documentation is available here.

See the Pen cdbxB by Adam Patterson (@adam-patterson) on CodePen.