Information bubble

This is a small style designed to display informations to the user.

This is how they look: This is an information bubble to help the user.

How to use it

Here is the markup to use for your bubbles:

<span class="info-spot">
	<span class="icon-info-round"></span>
	<span class="info-bubble">
		Put the bubble text here
	</span>
</span>

Of course, you may use any available icon instead of the info one.

Bubble position

If you need to change the bubble opening position, use one or both of these classes:

on-top

The bubble will open on top: This is an information bubble to help the user.

on-left

The bubble will open on the left: This is an information bubble to help the user.