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.
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 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 | 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) |
<!-- 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>
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.
<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>
<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>
<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.