Types of Callouts
The types of callouts and their usage can be categorized as follows:
- Tooltip callout
- A "tooltip" is a text only callout which provides additional information about a span of text or a link.
- Menu callout
- A drop-down "menu" of links which can be triggered by any element, such as a button, link, or icon.
- Form input callout
- Provides additional information about a form field when the user focuses the mouse cursor on that field.
- Cursor callout
- A callout which follows the mouse cursor. This will typically be triggered on hover of a media element, such as an image.
- Other Callout
- All other callouts can contain any type of content (i.e., text, images, calls to action, etc.) and is triggered by any element, such as a button, link, or icon.
There are three callout styles:
- Light background (default)
- This callout has a white background with a soft drop shadow. This is the default style and should be used for most callouts.
- Dark background
- This has a dark, shaded leaf green background with a thin, white border. This is to be used on pages with a light background.
- Alt Style for Interactive Image Viewer (IIV) pages
- This style has been specifically defined for IIV pages and should not be used anywhere else.
How to use
- Only use a callout if it is necessary to provide more information to the user without leaving the current page.
- Do not overload callouts with too much information. If there’s too much information, the user should just be taken to another page.
- Ensure that callouts happen within the viewport so as not to cause unnecessary scrolling or a callout that is hidden from view.
- Limit the functionality within a callout to clickable links/buttons. If more functionality is needed, consider using a modal.
Examples of when to use
- On a user’s name to get more information about the user.
- On a search result link to get more information about the record.
- To provide more information about a family tree node.
callout.jsautomatically instantiates any element with a
[data-callout]attribute, so it is very easy to add a little markup to create a callout. For example:
callout.jsto instantiate a callout on dynamic content or any other element. For example:
Note: The element that triggers the callout should be a
<button/>in most cases.
Account for special use cases.
Drop-down menus: Pass
[data-callout-classes]attribute or in the
'classes'setting to create a callout menu (drop-down menu). See the example.
Tooltips: Add the class
.calloutTooltipto create a callout tooltip. See the example.
Form inputs: Add a callout to a form input to create a form input callout. See the example.
Tweak the options by doing one of the following:
Other things you can do with callouts:
Use the available public methods to perform specific actions with a callout.
Add your own styles to a callout's content by placing a class name in the
[data-callout-classes]attribute of the trigger element (no dot, separate multiple classes with a space).
Available class modifiers
Add any of these classes to the callout trigger element to tweak its corresponding setting:
- Type modifiers (default callout shows on click)
- Callout will open on mouseenter, close on mouseleave.
- Callout follows mouse cursor.
- Will not attach any click or hover event. Allows you to use available methods to determine when the callout will open & close.
- Style modifiers (default style is light background, dark text):
- Gives callout a dark background, light text.
- Gives IIV style (only for IIV pages).
- Position modifiers (default position is bottom):
- Positions callout to top of trigger.
- Positions callout to right of trigger.
- Positions callout to left of trigger.
- Align modifiers (default alignment is center):
- Aligns callout to the left of the trigger.
- Aligns callout to the right of the trigger.
- Other modifiers:
- Add to the trigger to turn it into a tooltip.
- Add to the trigger to hides the drop down arrow on the trigger.
- Add to the trigger to hide the arrow pointer on the callout.
Available settings / options
The following methods are available: