back to Home page

Standards

Contact the Standards Team

Press / to open the search field.

Type a keyword to see related standards. Press to go to highlighted standard.

  • Live Callout
    Search BMD: live callout example.
  • Custom Callout
    Callout
  • Callout Menu
    Callout menu: live example
  • Tooltip Callout
    Tooltip callout
  • Form Field Callout
    Form input callout
  • Cursor Callout (follows cursor)
    Cursor callout (follows cursor)

UX Guidelines

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.

Callout styles

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.

Coding Guidelines

Prerequisites


Instructions

  1. Create the callout and its trigger in either the HTML or JavaScript:

    • In HTML: callout.js automatically instantiates any element with a [data-callout] attribute, so it is very easy to add a little markup to create a callout. For example:

      <button data-callout="<p>callout content goes here</p>" type="button">Click me</button>
      <!-- The [data-callout] attribute does accept HTML markup, but make sure to test that it displays properly -->
      Syntax for creating a static callout.

      OR

    • In JavaScript: You can do the same thing by calling callout.js to instantiate a callout on dynamic content or any other element. For example:

      $('<button type="button">Click me to open the callout</button>').callout({
      	'content': '<:p>Callout content goes here </p>' /* Accepts a string, HTML or a selector (or a function that returns one of those) */
      });
      Syntax for creating a callout dynamically.

    Note: The element that triggers the callout should be a <button/> in most cases.

  2. Account for special use cases.

    • Drop-down menus: Pass calloutMenu through the [data-callout-classes] attribute or in the 'classes' setting to create a callout menu (drop-down menu). See the example.

    • Tooltips: Add the class .calloutTooltip to 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.

  3. Tweak the options by doing one of the following:

    • Add a class modifier to the trigger element (see available class modifiers):

      <button class="ancBtn classModifiersGoHere" data-callout="Insert callout content here"><!-- Trigger text --></button>

      OR

    • Pass settings in the JavaScript call (see available settings):

      $('#calloutTrigger').callout({ 'settings go here' });
  4. 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).

      <button data-callout-classes="calloutMenu customClass1 customClass2" data-callout="Insert callout content here" type-"button"><!-- Trigger text --></button>

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)
.calloutTypeHover
Callout will open on mouseenter, close on mouseleave.
.calloutTypeCursor
Callout follows mouse cursor.
.calloutTypeCustom
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):
.calloutStyleDark
Gives callout a dark background, light text.
.calloutStyleAlt
Gives IIV style (only for IIV pages).
Position modifiers (default position is bottom):
.calloutPositionTop
Positions callout to top of trigger.
.calloutPositionRight
Positions callout to right of trigger.
.calloutPositionLeft
Positions callout to left of trigger.
Align modifiers (default alignment is center):
.calloutAlignLeft
Aligns callout to the left of the trigger.
.calloutAlignRight
Aligns callout to the right of the trigger.
Other modifiers:
.calloutTooltip
Add to the trigger to turn it into a tooltip.
.calloutTriggerNoArrow
Add to the trigger to hides the drop down arrow on the trigger.
.calloutHidePointer
Add to the trigger to hide the arrow pointer on the callout.

Available settings / options

The following settings are available to be passed in the JavaScript call:

$('#triggerElement').callout({
	'style': 'light', /* Callout style: 'light' (default) | 'dark' | 'alt' */
	'type': 'click', /* Type of callout: 'click' (default) | 'hover' | 'cursor' (follows mouse) | custom (create your own custom events) */
	'content': '', /* Callout content: Insert string, HTML markup, or selector */
	'classes': '', /* Class(es) to add to .calloutContent (separate with space, no dot) */
	'position': 'bottom', /* Position of callout relative to trigger: 'bottom' (default) | 'left' | 'right' */
	'align': 'center', /* Callout alignment: 'center' (default) | 'left' | 'right' (Does not apply to { position: 'left' } or { position: 'right' }) */
	'hidePointer': false, /* Set to true to hide pointer */
	'keepContentInPlace': true, /* True keeps content in DOM; False removes it */
	'showDelay': 100, /* Show delay time in ms for 'hover' callouts */
	'hideDelay': 100, /* Hide delay time in ms for 'hover' callouts */
	'onOpen': false, /* function ($trigger) { } Callback to run *before* callout opens */
	'onAfterOpen': false, /* function ($trigger) { } Callback to run *after* callout opens */
	'onClose': false /* function ($trigger) { } Callback to run *before* callout closes */
});
Available settings for callout.

Available methods

The following methods are available:

$('#triggerElement').callout('open');
Opens a callout
$('#triggerElement').callout('close');
Closes a callout
$.callout.content($('#trigger'), content);
Updates a callout's content
$('#triggerElement').callout('destroy');
Destroys a callout

Basic Callout Example See more examples

.

With HTML:

<button data-callout="<p>I am the content passed through the <code>[data-callout]</code> attribute.</p><img src='http://mediasvc.ancestrydev.com/image/3a9f5c7b-db0c-4a0e-9331-be4df1aa0210.jpg?Client=Trees&NamespaceID=1093&MaxSide=256' width='256' alt='This is an image inside a basic callout.' style='width:100%'/>" type="button" class="link">I will show a normal callout.</button>

OR

With JavaScript:

$('<button type="button" class="link">I will show the same callout, but I was created with a JavaScript call.</button>').callout({
	'content': '<p>I am the content passed through the <code>\'content\'</code> setting.</p><img src="http://mediasvc.ancestrydev.com/image/3a9f5c7b-db0c-4a0e-9331-be4df1aa0210.jpg?Client=Trees&NamespaceID=1093&MaxSide=256" width="256" alt="This is an image inside a basic callout."/>'
});
The same basic callout with JavaScript