Event Markers: Internal Tooltips

• Overview
• Enabling and Customizing Tooltips
• For All Markers
• For a Group of Markers
• For an Individual Marker
• Tooltip Text
• Using Date and Time tokens
• Using Custom Attributes
• Font
• Using Same Font in All Texts
• Using HTML Tags
• Background
• Fill and Border
• Corners
• Inside Margins
• Tooltip Shadow

Overview

To provide detailed information on an event presented on a chart, you can take advantage of balloon tooltips. Balloon tooltips can be generated with HTML, as demonstrated in Using HTML Tooltips, or with an internal mechanism for displaying tooltips for event markers.

This article covers all aspects of using the internal tooltip mechanism.

The screen shot below demonstrates a chart with a tooltip for an event marker:

Enabling and Customizing Tooltips

Tooltips can be customized at any level. You can set same text and visual settings for all markers or personalize them for a certain group or individual marker.

Before you can start experimenting with tooltips, you need to enable them. By default, displaying tooltips for event markers is disabled; to enable it, use the following XML syntax:

This syntax enables displaying tooltips with default settings. The sections below cover tooltip customization at different levels.

Note: In the majority of cases the examples provided throughout the article, demonstrate customizing tooltips for the entire group. But you can use any of the techniques described below in your applications.

For All Markers

To use the global tooltip settings for all event markers regardless of the group they belong to, use the following syntax:

The live example below demonstrates that all event markers have tooltips with a very similar text like "Event Date: 2008-05-01"; the only thing that varies in a tooltip text is date:

For a Group of Markers

To personalize tooltips for a certain group, the tooltip settings are to be placed at the group's level. In this case, a similar tooltip will be displayed for all event markers that belong to the group.

Here is a sample XML for customizing a tooltip for a certain group of event markers:

The live example below demonstrates two groups of event markers with individual tooltip settings for each group:

For an Individual Marker

In case each event marker must have a radically distinct text or appearance, the tooltip settings can be defined for each of them individually.

Here is a sample XML for customizing a tooltip for three event markers individually:

The live example below demonstrates three event markers that belong to the same group but have radically distinct tooltips:

Tooltip Text

To generate the text, tooltips can use static text combined with special tokens, which are replaced with custom-formatted date/time string that was set when adding the event marker to the group.

Tooltip text is specified in the <format> node, which is a subnode of <tooltip> at the corresponding level. Below is a sample XML for customizing a tooltip text:

Using Date and Time Tokens

It is required to enter the date/time values when adding event markers - in order to position them against the time scale. That value can be used later on for customizing the tooltip text.

Inserting the {%SourceDate} token into the tooltip text makes it display the date the event marker was added for.

Below is a sample XML for inserting the token into the tooltip text format string:

Like all other tokens that return date/time values, {%SourceDate} allows custom formatting. This technique is covered in detail in Date-Time Formatting.

You can also use the second token supported by the tooltip - {%GroupedDate}. This token displays the date the data series was grouped on when viewing the data at a large scale.

The live example below demonstrates using the {%SourceDate} token when customizing the tooltip text in three different groups:

Using Custom Attributes

Event Markers Creation article describes how custom attributes, carrying additional information, can be bound to markers. Attributes bound to an event marker can be used in the tooltip text.

This mechanism is very helpful, as it allows to avoid getting text duplicates when customizing the tooltip for each event marker and thus cut the size of the configuration file.

Adding custom attributes:

The live example below demonstrates configuring tooltips within a group using custom attributes:

Font

When customizing tooltip text, you can either apply the same settings for the entire text or define a custom formatting for the individual elements by using a limited set of HTML tags supported by the Flash Player.

Using Same Font in All Text

The font for an entire tooltip text is defined in the standard <font> node. Here is an XML sample for defining the font settings:

The detailed coverage for customizing font settings is provided in Font Settings.

Using HTML Tags

It is often helpful to use HTML formatting to draw user's attention to the most important pieces of the tooltip text and to give it a more attractive look.

This XML sample demonstrates how you can customize the look and feel of a tooltip text:

As you can see in the sample, the HTML-formatted text is also defined in the <format> node; however, it requires using the CDATA block, which enables the use special characters.

The live example below demonstrates a few text formatting techniques. Place the mouse pointer over the marker with the "H" caption to get the tooltip:

The detailed coverage for all supported HTML tags and available options is provided in Using HTML Tags in Text Formatting.

Background

This section provides examples for customizing tooltip background. The default tooltip settings are optimized to suit just about any content displayable on the chart. But whenever it's necessary, you can completely change the tooltip appearance by customizing its background at your discretion.

Tooltip background is configured in the <background> node. The following listing shows where it is located and which subnodes has available for customizing:

Fill and Border

Fill and border are configured in the <fill> and <border> nodes respectively. A tooltip can have a solid or gradient background fill.

Here is a sample XML for configuring the background fill and border:

This live example demonstrates these settings in action:

To learn more about all background fill and border configuration options, please refer to Background Settings.

Corners

Like for any other background, for a tooltip too you can customize the corner shape and size. These properties are customized in the standard <corners> node.

Here is a sample XML for customizing corners a tooltip background:

This live example demonstrates these settings in action:

To learn more about customizing corners, please refer to Background Settings.

Inside Margins

Inside margins are configured in the standard <inside_margin> node, where you can define the margin for each side.

The XML sample below demonstrates inside margins set by all sides:

Here is a live example demonstrating these settings in action:

Tooltip Shadow

Tooltip backgrounds can drop shadow. By default, shadow for event marker tooltips is enabled, but you can disable or customize it as necessary. Here is a sample XML for configuring tooltip shadow:

Here is a live example demonstrating event markers with a background dropping red shadow:

To learn more about all shadow properties and their configuration options, please refer to XML Reference.