twitter/bootstrap — pull request #4386 by brianfeister (2012-08-14 13:52:00+00:00)
Title: Add optional (opt-in) mixin to create an outline on popovers / tooltips 

Assumes that users will append it to the `:after` pseudo class of `.arrow`. Both the size of the outline (perceived thickness of faux outline) and also the color can accept parameters. All math is handled dynamically.

Opting in would look like:

&.top .arrow {
#popoverArrow > .top( @arrowWidth, @black );
&:after	{
#popoverArrow > #outlinedArrow > #top > .inner-arrow( @mainArrowWidth, @outlineWidth, @white );
}
}

This pull request was originally made (by mistake) against master here: https://github.com/twitter/bootstrap/pull/4323

To answer @markdotto's question about -1.5 and 3 in the math, it's in order to preserve the intended result of the `arrowWidth` variable. Based on the pythagorean theorem, despite the clipping effect being done by CSS (which doesn't effect the darker arrow which is behind the main popover bg in the DOM, the point of origin for the 0-width DOM element is technically inside of the main popover body. As a result, calculating the y-axis width of the new element I'm creating would overlap the content of the tooltip if I used `*2` in my math. The `-3px` in the math is just a shim - the best way I could come up with for ensuring that the integrity of the arrow size is maintained (according to the pythagorean theorem) without the arrow being disconnected from the popover body.

Also, for what it's worth - if we didn't care about the passed var being an exact match for the y-axis width of the arrow, we could clean it up, and even with that limitation I'm sure @fat could do this better :)