Context Aware Positioning

What position settings should I apply to a popup element** so that it is aware of its position on the page, so that it does not end up positioning itself off the page.

** There are two use cases of “popups” where I’d love to control the positioning of an element:

  1. a select that is just above the scroll: when the user clicks the arrow/caret to open the options, I’d want it to open upwards, but in all other instances I’d want the dropdown to act as normal.

image

  1. a tooltip component that might be anywhere on the page – I currently have it set to be centered to the trigger but when this icon is on the far right of the page, the tooltip could run off the page.

image