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:
- 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:
- Example two makes use of the
shown.bs.popoverevent, and some heavy handed selectors, to hide the popover when another is shown elsewhere on the page. This is often preferable as the
focustrigger used by example one will hide the popover if the invoking element loses focus for any reason including the popover itself gaining focus.
- 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.popoverevent is fired.
There's lots more you can do with bootstrap popovers. Complete documentation is available here.