Popover/dropdown/tooltip placement suggestion

[RobJacobs]

I've been playing around with adding more placement options to the Popover/Dropdown/tooltip for top-left, top-right, etc... and came up with an approach for placing the popup elements I would like to share and perhaps introduce into the TWBS library. This plunk demonstrates what I have done. The placement.less contains the mixins that build up the css, style.css contains the generated css. One advantage to this approach is that I don't use discreet pixels to set the top, bottom, left, or right values so the container will grow as the content grows without shifting the anchor point.

_EDIT_
Updated plunk to remove Angular dependencies.

[twbs-lmvtfy]

Hi @RobJacobs!

You appear to have posted a live example (http://run.plnkr.co/plunks/XWYE6iIvYmDpwlk8K0A3/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 2, column 23: Attribute ng-app not allowed on element html at this point.
• line 14, column 80: Attribute ng-controller not allowed on element body at this point.
• line 17, column 110: Attribute ng-model not allowed on element select at this point.
• line 17, column 110: Attribute ng-options not allowed on element select at this point.
• line 21, column 70: Attribute ng-model not allowed on element input at this point.
• line 29, column 105: Attribute ng-class not allowed on element div at this point.
• line 43, column 110: Attribute ng-class not allowed on element ul at this point.
• line 54, column 83: Attribute ng-class not allowed on element div at this point.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[RobJacobs]

@kkirsche Asked: How does this compare to the exotic placement options found here from mgcrea/bootstrap-additions?

That is what inspired me to come up with this. There were a couple of additional problems I wanted to solve:

1. I wanted a way to position the popup without having to measure and set top/left pixels. That way I could just add the appropriate class and forget about it.
2. I wanted tighter integration with the TWBS variables. By using the appropriate variables for arrow placement, customized packages wouldn't throw the alignment off.
3. I wanted to use mixins as much as possible for better organization.

I have approached angular-strap about integrating this into their project but I didn't know if the larger TWBS community might find this useful.

[kkirsche]

Thanks for your reasoning about this. 😃

[mdo]

We won't be adding any new features—including positioning techniques—to v3. I'm unsure if we'd do this in v4 either, but we can revisit that once the alpha is out.