11 Tour Bubble

Use the Tour UI component to put together a comprehensive overview of UIs to new visitors.

11.1 Usage Guidlines

A “Tour” should be used when a new visitor comes to a UI module. It gives a step-by-step explanation of what the UI Module covers and where to go to accomplish certain tasks. The ‘Tour’ pattern uses the “Tour Bubble” UI component. We recommend to use the bootstrap popover component to do so.

Popover

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<div class="popover bottom {$modifiers}">
	<div class="arrow"></div>
	<h3 class="popover-title">Popover</h3>
	<div class="popover-content">
		<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
	</div>
</div>