How to create HTML Tooltips for Event Markers

Overview

Besides the internal event marker tooltips, you can create HTML-based tooltips using mouse events and some special AnyChart Stock functions.

HTML-based tooltips have the following advantages:

The only disadvantage of HTML tooltips is that you can't see them when the chart is in the full-screen or in Interactive PDF exported chart mode, as Flash is the only environment that exists in these modes.

You can see how great HTML tooltips are in the Online Demo: AnyChart Technical Analysis Portal. To be able to see them, select Key Developments, Insider Transactions or Analyst Opinion Changes to be shown on the chart using the drop-down menu and then hover the events being displayed.

to top

How it Works

This article describes the theory that should be known to create HTML tooltips and the practical steps that should help you to add such functionality to your application.

Flash Player Embedding Settings

To show any HTML element above the Flash movie on a page, you should wMode to opaque.

Here is a sample code for embedding a chart with properly configured wMode:

to top

Mouse Events

To add the show/hide functionality to HTML tooltips, we will need the following events dispatched by the event markers:

All these events, when properly handled, provides necessary information for showing and formatting informative HTML tooltips.

The onEventMarkerMouseOver and onEventMarkerMouseOut handlers provide the functionality for obtaining the object that contains information about the event marker, and the onMergedEventMarkerMouseOver and onMergedEventMarkerMouseOut ones provide the functionality for obtaining the array with those objects.

Besides the event marker data related to the above listed events, there are some more event-marker dispatched events that can be used when working with HTML tooltips. They include:

All the information that can be retrieved when handling an event can be sorted out into three categories:

1. Timestamps and Identifiers

In the eventMarker object, which can be retrieved on any of the listed above event, you can find the following properties:

The most interesting properties are: id, date and groupedDate. id can be used for identifying the marker and displaying information associated with it. date and groupedDate are used for showing the date of the event, which the marker is bound to.

Here is a sample JavaScript code that shows how to retrieve these (or any other properties) in an event handler:

2. Bound-Box

To show HTML near a hovered event marker, we need to know its coordinates, width and height. Any event dispatched by an event marker provides its bound-box - the coordinates of the top left corner and the width/height pair.

Here is a sample JavaScript code that shows how to get the bound-box when handling the onEventMarkerClick event:

The illustration below shows what a bound-box is and what coordinate system it uses:

The x and y coordinates are counted from the top left corner of the Flash Player, with the margins set in the <inside_margin> and <outside_margin> nodes taken into account. Please note the (0,0) point.

When you have this data, you can place an HTML tooltip in any way you want it: to the left, to the right, under, above the event marker or over it.

3. Custom Attributes

When creating an HTML tooltip, you will most likely need to know the values of the custom attributes - data fields that store additional data on the events. These data fields can contain information, hyperlinks or any other data that affect the content and the look of the tooltip.

You can learn how to add custom attributes to event markers in the Creating Event Markers article, and as soon as you know that you can study the section below that describes how to get and use those in event handlers.

Say we have got only one event marker configured by this XML:

XML/JSON Syntax
Plain code
01 <event locale_based_date="2010-02-12" format="A">
02   <attributes>
03     <attr name="alertType"><![CDATA[MACrossover]]></attr>
04     <attr name="curMacdValue"><![CDATA[0.027]]></attr>
05     <attr name="curSignalValue"><![CDATA[-0.007]]></attr>
06     <attr name="prevMacdValue"><![CDATA[-0.046]]></attr>
07     <attr name="prevSignalValue"><![CDATA[-0.016]]></attr>
08   </attributes>
09 </event>
01{
02  localeBasedDate: "2010-02-12",
03  format: "A",
04  attributes: {
05    alertType: "MACrossover",
06    curMacdValue: "0.027",
07    curSignalValue: "-0.007",
08    prevMacdValue: "-0.046",
09    prevSignalValue: "-0.016"
10  }
11}

This event marker contains several custom attributes, which we need to obtain when handling the event dispatched by the maker. The sample JavaScript below shows how to obtain all the attributes' values in the onEventMarkerClick handler:

Let's consider the following set of custom attributes to show how we can make use of them in HTML tooltips:

XML/JSON Syntax
Plain code
01 <group>
02   <events>
03     <event locale_based_date="2008-07-11">
04       <attributes>
05         <attr name="researchFirm"><![CDATA[Credit Suisse]]></attr>
06         <attr name="action"><![CDATA[init]]></attr>
07       </attributes>
08     </event>
09     <event locale_based_date="2008-09-19">
10       <attributes>
11         <attr name="researchFirm"><![CDATA[Piper Jaffray]]></attr>
12         <attr name="action"><![CDATA[up]]></attr>
13         <attr name="from"><![CDATA[Neutral]]></attr>
14         <attr name="to"><![CDATA[Buy]]></attr>
15       </attributes>
16     </event>
17     <event locale_based_date="2008-10-31">
18       <attributes>
19         <attr name="researchFirm"><![CDATA[JMP Securities]]></attr>
20         <attr name="action"><![CDATA[down]]></attr>
21         <attr name="from"><![CDATA[Mkt Outperform]]></attr>
22         <attr name="to"><![CDATA[Mkt Perform]]></attr>
23       </attributes>
24     </event>
25   </events>
26 </group>
01{
02  events: [
03    {
04      localeBasedDate: "2008-07-11",
05      attributes: {
06        researchFirm: "Credit Suisse",
07        action: "init"
08      }
09    },
10    {
11      localeBasedDate: "2008-09-19",
12      attributes: {
13        researchFirm: "Piper Jaffray",
14        action: "up",
15        from: "Neutral",
16        to: "Buy"
17      }
18    },
19    {
20      localeBasedDate: "2008-10-31",
21      attributes: {
22        researchFirm: "JMP Securities",
23        action: "down",
24        from: "Mkt Outperform",
25        to: "Mkt Perform"
26      }
27    }
28  ]
29}

As you can see here, each marker has the researchFirm and action attributes. The action attribute can be either up, down or init. If action isn't equal to init, then the marker also has the from and to attributes.

By handling the value of the action and other attributes, you can make your tooltip truly infographical! Change color, formatting and the way you show the data.

The illustration below shows an example of how attribute values can affect the look and the content of tooltips:

Now it's obvious that the correct use of custom attributes and HTML formatting options can lead to impressive results!

Besides the static text, you can also place some URLs or parameters that can be used to create hyperlinks in tooltip. Learn more about this in the section Tooltip with Hyperlink Sample .

to top

Basic Sample

The easiest way to create HTML tooltips is to show a div element over the chart and put all the necessary data onto that div. In this section, we are going to show this process step-by-step.

First of all, we will create a div as shown below and place it at the end of our HTML document:

Then we will create a css for our div:

The key moments in this style are the positioning settings: "position: absolute;" and the fact that the div is hidden - using "display: none;"

The container for the tooltip is now ready, and its look is configured. The next step is coding the functions that would handle case when user moves the mouse over the event marker - for that purpose, we are going to use the onEventMarkerMouseOver and onEventMarkerMouseOut events described above:

(We use the jQuery library in the sample to make the code easier to read and use and... Because we simply love it.)

This code allows us to show or hide a tooltip, but we also need position it in a proper place and fill it with adequate information. In other words, we need to change its position and content.

The position is calculated from the position of the chart on the page and the position of the event marker on the chart. So, we calculate the position and place the div to the right of the event marker:

Warning: #chartContainer in this sample is the HTML element that contains the chart.

The div for the tooltip is properly placed; let's now populate it with the data that we can get from the custom attributes and datetime properties.

For that purpose, we are going to use marker.date and marker.customAttributes:

That's it! The div element with the right data in the right place, shown or hidden when necessary, is a basic HTML tooltip, you can see all the code above in the following ready to use sample:

Online HTML/JavaScript Sample
Simple HTML Tooltips for Event Markers
Creating simple HTML based event marker tooltips.

to top

Tooltip with Hyperlink Sample

A pretty common and natural requirement for elements like complex tooltips would be the ability to use hyperlinks in the tooltip text. The main challenge here is that the tooltip must remain visible even when the mouse leaves the marker (unlike what happens in the previous sample). Besides that, there are some issues with the cross-browser support and showing the element over a Flash object. In the sample below you will find all the necessary information that makes the creation of tooltips with hyperlinks an easy task.

Let's take the sample event markers that contain information about key developments:

XML/JSON Syntax
Plain code
01 <group>
02   <events>
03     <event locale_based_date="20091222">
04       <attributes>
05         <attr name="title"><![CDATA[Latest Release of OracleВ® SQL Developer Further Increases Oracle Database Developer Productivity]]></attr>
06         <attr name="link"><![CDATA[http://www.oracle.com/us/corporate/press/042633]]></attr>
07       </attributes>
08     </event>
09     <event locale_based_date="20091217">
10       <attributes>
11         <attr name="title"><![CDATA[ORACLE REPORTS Q2 GAAP EPS OF 29 CENTS UP 15%, NON-GAAP EPS OF 39 CENTS UP 15%]]></attr>
12         <attr name="link"><![CDATA[http://www.oracle.com/us/corporate/press/042537]]></attr>
13       </attributes>
14     </event>
15     <event locale_based_date="20091216">
16       <attributes>
17         <attr name="title"><![CDATA[Oracle Project Portfolio Management Integration Packs Integrate Project Management with ERP]]></attr>
18         <attr name="link"><![CDATA[http://www.oracle.com/us/corporate/press/042384]]></attr>
19       </attributes>
20     </event>
21   </events>
22 </group>
01{
02  events: [
03    {
04      localeBasedDate: "20091222",
05      attributes: {
06        title: "Latest Release of OracleВ® SQL Developer Further Increases Oracle Database Developer Productivity",
07        link: "http://www.oracle.com/us/corporate/press/042633"
08      }
09    },
10    {
11      localeBasedDate: "20091217",
12      attributes: {
13        title: "ORACLE REPORTS Q2 GAAP EPS OF 29 CENTS UP 15%, NON-GAAP EPS OF 39 CENTS UP 15%",
14        link: "http://www.oracle.com/us/corporate/press/042537"
15      }
16    },
17    {
18      localeBasedDate: "20091216",
19      attributes: {
20        title: "Oracle Project Portfolio Management Integration Packs Integrate Project Management with ERP",
21        link: "http://www.oracle.com/us/corporate/press/042384"
22      }
23    }
24  ]
25}

In the title attribute, we store the name of the event; in the link attribute - the URL of the document with details about the event.

Just like we did in the previous sample, we create the show/hide functions with the title and content creation modified in the desired way:

Now we can show or hide a tooltip with a link, but we still are unable to click on it.

To solve this problem, here is what we can (and are going to) do: If for a certain period of time the mouse cursor doesn't return to the tooltip - we hide it; if cursor appears over it again - it stays visible.

Here is a sample that implements this idea (again, with the help of jQuery):

Online HTML/JavaScript Sample
HTML Tooltips for Event Markers with Hyperlinks
Creating HTML based event marker tooltips with hyperlinked text.

In this sample we do not hide the tooltips when the onEventMarkerMouseOut event occurs:

So, when isTooltipHovered is true, the tooltip is still shown, and user can click on the link. All we have to do now is to initialize the value of this flag, which is false by default.

Something like this :

The hover methods get the functions; one is triggered when the tooltip is hovered, and the other one - when the cursor leaves the tooltip.

Note: When the tooltip is hovered, we disable chart events using the disableInteractivity() method; this is done to prevent the focus issues in some browsers.

to top

Tooltips and Merged Event-Markers Sample

In the Merged mode, event markers can be grouped into a single one to avoid the confusion when scaling the markers.

Internal tooltips don't work with grouped tooltips, because the grouping of data in such cases depends on the nature of the data being shown; however, with custom HTML tooltips you have the full control over the content, so they are a natural and the only way to go in this case.

To work with merged tooltips, you will need two special events:

They are pretty similar to the single marker events, with the only difference that you get an array with event marker objects, instead of one object.

The custom sample below shows how HTML tooltips work with merged and individual tooltips at the same time:

Online HTML/JavaScript Sample
HTML Tooltips for Event Markers
Creating HTML based event marker tooltips.

to top