About
Overview
Our Formula
Aon experience
how it works
AccessibilityWhat is Accessibility?Digital Design SystemAccessibility and AonAssistive TechnologyAccessibility & color
Feature Request
Give Feedback
UpdatesVersion 2.4Version 2.3Version 2.2Version 2.1Version 2.0Version 1.3Version 1.2Version 1.1Version 1.0
Foundations
Color
icon libraryActionscontrolsnavigationfeedbackcommunicationsview settingsfilesmiscellaneous
Layout12 column gridBreakpoints
spacinglocal spacingglobal spacing
TypographyHeadlinesparagraphsLink Styling
Components
Core Components
alertsBanner AlertsContextual Alerts
buttonsspecificationsimplementation
filter chipsspecificationsimplementation
on/off controlsspecificationsimplementation
form elements
introductionBest PracticesImplementation
checkboxes
radio buttons
selects
text area
text inputsspecificationsimplementation
Modules
navigation
in-page navigation
HeaderHeader BarNavigation Menus
footerBasic footerRobust Footer
progress bars
TabsHorizontal TabsButton Tabsvertical Tabs
Rail Navigation
overlays
modalsSpecificationsStyles
PopoversStandard PopoverAction Menus
tooltipsInfo TextLabel HoverData VisualizationTooltip Implementation
content containers
cardsSmall CardsLarge cards
expansion panelsspecificationsStyle variationsfunctionality
other
TablesSpecificationsImplementation
Templates
dashboard
forms
processes
standard
Data Visualization
foundations
best practices
colorCategoricalValueperformancebackgroundspecifications
data snapshotsspecificationsPage Layouts
global elementsGrid ElementsLegend ChipsTooltips
typography
chart types
Use Cases
Area chartsingle Area ChartStacked Area Chart100% stacked ChartSpecifications
bar chartsingle Bar ChartsGrouped Bar ChartsStacked Bar Charts100% stacked ChartsSpecifications
circular chartPieDonutSemi-circleSpecifications
line chartSingle Line ChartMultiple Line ChartSpecifications
scatter plotTypesImplementation Specifications

Tooltips

Tooltips are a type of dialogue that contains text explaining an element in theinterface, and are triggered on hover.

Tooltips should include only simple text, no links. Tooltips should not contain more than 200 characters. If you need more space or to include interactive text, use a Popover, which is triggered on click.

info-circle

How will this information be used?

Add groceries to cart before proceeding to checkout.

Required
Oops! Something went wrong while submitting the form.

Need to add an action to your overlay? Use a Popover instead of a Tooltip.

View Popovers

Info Text

Information tooltips provide explanations for content in the interface, sometimes answering a question or providing a description there is otherwise no room to include. Information tooltips are triggered by a user hovering over an info icon or phrase.

Example
info-circle

How will this information be used?

Add groceries to cart before proceeding to checkout.

Anatomy

1) Card Area
background-color: White
border: 1px solid
border-color: Gray 05
border-radius: 4px
box-shadow: 0px 0px 16px (#808080)

2) Arrow‍

3) Headline (optional)
style: Default Paragraph Bold
color: Navy

4) Text
style: Default Paragraph

Size and spacing

Data Visualization Tooltips

Tooltip Implementation

Hover Trigger

Large data sets may include very small data points that appear as one pixel or less in your visualization, but the user still needs to reference. Because these instances are hard to access with a cursor, hover areas should include the relevant axis label.

Orientation

Tooltip orientation is dependent on the placement on the chart. The default is to open below the anchor point, with a centered caret. If the anchor point is near the edge of the chart, the orientation and caret placement change accordingly.

Aon Consumer Experience & Design Group
‍
200 E. Randolph St.
5th Floor
Chicago, IL 60601

global.design@aon.com‍

AboutFoundationsComponentsModulesData Visualization

For best results, please view on Desktop in Chrome or Firefox.