A utility component which anchors content to another element. Anchored is meant to be a base from which you can build any component which needs to be positioned relative to another. Some examples in Colibri are the tooltip ( docs , source ) and the date picker ( docs , source ).

Anchored will position content around, or centered on top of another element, and keep it aligned when scrolling or resizing even when placed inside nested scrollable containers. The content will attempt to stay visible as long as possible when scrolling or resizing, but will close automatically if it lies mostly out of frame.

• For any components where you can't bind:this , you can wrap the component in a native DOM node and use that. All Colibri components export element which is the outermost container node of the component.
• The content is not automatically dismissed based on certain actions, for example clicking outside or pressing escape. This behavior will have to be implemented in the parent component. If you decide to dismiss on click events and the trigger also uses a click event, make sure to use on:click|stopPropagation on the trigger. Otherwise the event will bubble up and immediately close the content.

<script>
import { Anchored } from '@thetinkerinc/colibri';

let elem;
let open = false;
</script>

<button
	id="elem"
	class="display"
	bind:this={elem}
	on:click={() => (open = !open)}>
	Click on me
</button>
<Anchored bind:open anchor={elem}>
	<div id="anchored" class="display">
		Click and drag the background to see how I react when scrolling
	</div>
</Anchored>

<style>
.display {
	border-radius: 0.25rem;
	border: 1px solid #d1d5db;
	padding: 0.5rem 1rem;
	text-align: center;
}
#elem {
	background: white;
	max-width: 100px;
}
#anchored {
	background: #a7f3d0;
	max-width: 200px;
}
</style>