Tooltips

Overview

Tooltips come in two forms, regular tips and powertips, both of which function the same way. The regular tips are a single color, while the powertips differentiate between the tip title and the content. Both tip styles allow four orientations (top, bottom, left, and right), an instant or fading transition, variable offsets, and the ability to pull tip content from an inline element.

Usage

Tooltips can be added to any element simply by giving it a class of either tip or powertip. By default, the tooltips will appear above the trigger element. However, if you would like to have them appear to the right or on the bottom, you could modify the class to tipRight or powertipBottom, respectively.

Each tip also comes with a number of options to customize it (the options are the same for both tip types). The options are passed in through data-attributes. In most cases, you will at least want to use the data-content attribute to provide your tip with content. Options exist for controlling the transition, the offset, adding a title, and even pulling in content from another element.

Tips work on mobile screens as well, though they function slightly different. No matter the tip direction, the mobile tooltip will only appear above or below the trigger, depending on the scroll position. Mobile tips will also appear just under the full-screen width.

Inline Tips

Inline tips populate the tip's content from any given element on the page with an id. To assign the target element, simply assign the date-target attribute with the element id, including the # sign. Inline tips are especially useful if you want to include HTML in your tip content. Note If you use both data-target and data-content on the same tip trigger, the tip will not pull in the content from the inline element.

If you want to hide any inline tip content from view, simply add the class tipContent to the content's containing element.

Options
Tooltip Options
Options Description Default Values
data-title The title of the tip. none string
data-content The content of the tip. none string
data-target The id of the element containing the tip's content. none target #id
data-transition How the tip appears and disappears. instant instant|fade
data-offset The tip offset from the trigger in pixels (without the unit). 10 int (in pixels)
Sample Code
<!-- A default tip -->
<a href="#" class="tip" data-content="Tip Me">Default Tip</a>

<!-- A custom transition -->
<a href="#" class="tip" data-content="Fade Out" data-transition="fade">Fade Tip</a>

<!-- An inline tip -->
<a href="#" class="tip" data-target="#tipToe">Inline Tip</a>
<div id="tipToe" class="tipContent">Shh! Be vewy quiet, we're hunting wabbits.</div>
Custom Styling Tips

If you would like create custom styles for the tips, each tip has the following HTML structure:

<div class="{tipClassName}Container">
	<h6 class="title">Title</h6>
	<div class="content">Hi Mom!</div>
</div>

Keep in mind that the container name is pulled in from the tip class name and appended with Container. The title and/or the content is also optional depending on which data attributes are present.

Demos

Regular Tips
Example Code
<ul class="unlisted flush horizontal">
	<li><a href="#" class="tip" data-content="This is the default tip">Default Tip</a></li>
	<li><a href="#" class="tipTop" data-content="This is a top tip">Top Tip</a></li>
	<li><a href="#" class="tipRight" data-content="This is a right tip">Right Tip</a></li>
	<li><a href="#" class="tipBottom" data-content="This is a bottom tip">Bottom Tip</a></li>
	<li><a href="#" class="tipLeft" data-content="This is a left tip">Left Tip</a></li>
</ul>
Power Tips
Example Code
<ul class="unlisted flush horizontal">
	<li><a href="#" class="powertip" data-title="Default" data-content="This is the default tip">Default Tip</a></li>
	<li><a href="#" class="powertipTop" data-title="Top" data-content="This is a top tip">Top Tip</a></li>
	<li><a href="#" class="powertipRight" data-title="Right" data-content="This is a right tip">Right Tip</a></li>
	<li><a href="#" class="powertipBottom" data-title="Bottom" data-content="This is a bottom tip">Bottom Tip</a></li>
	<li><a href="#" class="powertipLeft" data-title="Left" data-content="This is a left tip">Left Tip</a></li>
</ul>
Tip Options
This is an inline tip
Example Code
<ul class="unlisted flush horizontal">
	<li><a href="#" class="tipTop" data-content="This tip fades in and out" data-transition="fade">Fade Tip</a></li>
	<li><a href="#" class="tipRight" data-content="This tip is offset by 10px" data-offset="10">Offset Tip</a></li>
	<li><a href="#" class="tipLeft" data-target="#inlineTipContent">Inline Tip</a></li>
</ul>
<div id="inlineTipContent" class="tipContent">
	<strong>This</strong> is an inline tip
</div>

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.