How To Extract Bootstrap's Popover Functionality?

Question

I have a non-bootstrap project which requires popover functionality.

I'd like to use bootstrap's popovers, but don't want to include all of bootstrap, since I'll only be using this one feature. I'd also be open to suggestions for a different standalone popover widget.

Bootstrap's popover are described here, with examples:

http://getbootstrap.com/javascript/#popovers

My questions are:

1. Which bootstrap CSS definitions will I need to extract from the source?
2. Since the bootstrap customizer is not yet available, do I just need to use the file tooltip.js, or are there some other base js files I'll need to include?

Thanks!

Answer 1

1. Here's a fiddle with the relevant snippets of Bootstrap. The relevant classes are:

   .popover
   .popover.top
   .popover.right
   .popover.bottom
   .popover.left 
   .popover-title 
   .popover-content 
   .popover .arrow
   .popover .arrow:after
   .popover .arrow
   .popover .arrow:after
   .popover.top .arrow
   .popover.top .arrow:after
   .popover.right .arrow
   .popover.right .arrow:after
   .popover.bottom .arrow
   .popover.bottom .arrow:after
   .popover.left .arrow
   .popover.left .arrow:after
   

2. Yes, since popover extends tooltip. And you'll need jQuery if you're not already using it.

I've also heard some nice things about qTip2.