Skip to Content Skip to Navigation

User Experience Toolkit

Popovers

Popovers are an interactive way to provide a secondary form of navigation in many different location outside the dedicated areas.

Default Implementation

HTML:
<a href="#" class="ux-popover">Program Area!</a>
<div class="ux-popover-container" >
	<ul>
		<li><a href="#">UI</a></li>
		<li><a href="#">Dews</a></li>
		... Omitted Content ...
	</ul>
</div>
JavaScript:
<script>
	$(document).ready(function(){
		ux.load("popover");
	});
</script>

In order to implement popovers, place an anchor where ever the secondary navigation is expected to appear and give it a class of ux-popover. Right after the the new anchor point, create a new div with the the class of ux-popover-container. The contents of a popover should always be an unorder list (ul), with each list item (li) being a link to another page.

Additional Styles

Be default popovers use a very strong dark barkground to give contrast over normal page content. To implement a more blended popover style simply add the class of light-popover after the standard ux-popover class.

HTML:
<a href="#" class="ux-popover light-popover">Program Area Light!</a>
<div class="ux-popover-container" >
	... Omitted Content ...
</div>

Thanks for the feedback! It will help us improve your experience.