Skip to Content Skip to Navigation

User Experience Toolkit

Tooltips

Tooltips are an intuative way of hiding additional contextual information about a particular part of a screen to aid a user on a needed basis.

Default Implementation

Example:
HTML:
<form class="ux-form">
	<label for="example-item-1">
		<span">
			My Label Text
			<abbr class="required" title="Required Field">*</abbr>
		</span>
		<input type="text" id="example-item-1" />
	</label>
</form>

As of v.0.4.9 of the UXT Framework, Qtips 2 has been removed and swapped out with a new internal tooltips script. This allowed the UXT template to upgrade to the latest version of jQuery and jQuery UI. For users still on older release of UXT please reference the Qtips 2 documentation for additional assitance.

This is one of the core libraries that avaliable for use by default. This means developers do not have to worry about lazy loading the functionality. By default any abbr, acronym, dfn, with the title attirbute defined, will be setup to include a tooltip.

Additional Implementation

Contextual Help tooltips

In the example above, tooltips were setup automatically by simply including some standard html attributes. Complex or custom tooltips can also be created by using a div with the class of ux-contexthelp.

Example:
HTML:
<form class="ux-form">
	<label for="example-item-1">
		<span class="ux-main-label">
			Confusing Instructions
		</span>
		<input type="text" id="example-item-1" />
		<div class="ux-contexthelp">Help Information</div>
	</label>
</form>

In order to implement these more customizable tooltips simply create a div with the class of ux-contexthelp. Then include an additional class on the input's span tag of; ux-main-label. This allows for proper placement of the dynamically added question mark image. The contents of the div found after the input can be much larger than your standard title attribute and can also include other nested element if required.

Dynamic Tooltips

Tooltips are by default are not dynamic. That meaning if new tooltip are added to the page after the standard document ready functions have already executed will not work by default. This can be easily correct by calling a the jQuery tooltip function.

Click the add button to dynamically add tooltips

HTML:
<div id="newTips"></div>
<input type="button" id="addTooltip" value="Add Tooltip" />
JavaScript:
<script>
$(document).ready(function() {

    // Add tooltips on click of the add button
    $('#addTooltip').on('click', function() {

        // Get the current count of tooltips
        var toolTipCount = $('#newTips .dynamic-tooltip').length + 1;

        // Variable to hold the basic tooltip structure and the correct number
        var newToolTip = '

Tooltip ' + toolTipCount + '

'; // Add the new tooltip $('#newTips').append(newToolTip); // Bind the tooltip events. $('#tooltip' + toolTipCount).tooltip(); }); }); </script>

In the example above we show the code used to dynamically add a paragraph (p) and span (span) tags to the emptry content area above. In each case tooltips are being added via the append function, but right after it has been appended the new tooltip is being directly targetted using its own id and the function tooltip is being called to setup the tooltip events on the new element.

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