Responsive, configurable overlays that support modal and non-modal centered overlays and overlays with arrows


Modal overlay

Standard modal. Includes a close button in the top left so the user can dismiss the modal.

Modal without close button

Modal close cross removed. This should be used where the user has to make a choice or confirm they've seen something.


Tooltip for annotating bits of UI

<div class="demo-overlay-container">
	<button class="o-overlay-trigger o-buttons o-buttons--big" data-o-overlay-src="#overlay" data-o-overlay-tooltip="true" data-o-overlay-id="overlay" data-o-overlay-arrow-position="top" aria-pressed="false" aria-haspopup="true">Launch overlay</button>

<script type="text/template" id="overlay">
	<div class="demo-tooltip">
		<strong>tooltip title</strong><br/>Useful for annotating new features.
GitHub Repository


Build Service

Add the following to your <script> and <link> tags.


How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-overlay"@"^1.15.1"

For more information see the Origami build process.