Generating HTML Tooltips (htmlToolTip)

How to:

When tooltips are defined for one or all series, the htmlToolTip properties enable and define or disable HTML-based (div) style tooltips for any chart tooltips. The series-specific tooltip property defines the text to show in the tooltip.

The following code shows the properties and default values:

htmlToolTip: {
   enabled: false,
   mouseMargin: 10,  
   style: undefined,
   autoTitleFont: 'bold 12pt Sans-Serif',
   autoContentFont: '10pt Sans-Serif',
   snap: false
   }
Top of page
x
Syntax: How to Generate HTML Tooltips
htmlToolTip: {
   enabled: boolean1,
   mouseMargin: mnumber,  
   style: 'sstring',
   autoTitleFont: 'tfstring',
   autoContentFont: 'cfstring',
   snap: boolean2   }

where:

boolean1

Enables or disables HTML-based tooltips. Valid values are:

  • true, which uses HTML-based tooltips for all chart tooltips.
  • false, which uses standard style tooltips for all chart tooltips. This is the default value.
mnumber

Is the distance from the top of the cursor to the bottom of the tooltip, in pixels.

'sstring'

Defines the style of the tooltip. Valid values are:

  • 'seriesFill', which fills the tooltip background with a lightened version of the series color.
  • an object or string defining CSS properties.
  • undefined. This is the default value.
'tfstring'

When series:tooltip is set to 'auto', use a CSS font string to define the formatting of automatic tooltip title text. The default value is 'bold 12pt Sans-Serif'.

'cfstring'

When series:tooltip is set to 'auto', use a CSS font string to define the formatting of automatic tooltip content text. The default value is '10pt Sans-Serif'.

boolean2

Enables or disables snapping tooltips. Valid values are:

  • true, to enable snapping tootips.
  • false, to disable snapping tooltips. This is the default value.
boolean3

Enables or disables sticky tooltips. Valid values are:

  • true, to enable sticky tootips. The tooltip is only hidden when the mouse moves out of the chart frame.
  • false, to disable sticky tooltips. The tooltip is hidden when the mouse moves off any riser. This is the default value.
Example: Generating HTML-based Tooltips

The following request generates HTML-based tooltips:

GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US COGS_US MSRP_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
   {series: 0, color: 'lightgreen'},
   {series: 1, color: 'tan'},
   {series: 2, color: 'lightblue'},
   {series: 3, color: 'beige'},
   ],
  htmlToolTip: {enabled: true,  snap: true}       
*END
ENDSTYLE
END

On the output, the tooltips have callout arrows because the snap property is enabled:

The following version of the request formats the background color of the tooltips and the font of the tooltip for series 0, which has been set to tooltip:'auto':

GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US COGS_US MSRP_US
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
   {series: 0, color: 'lightgreen', tooltip:'auto'},
   {series: 1, color: 'tan'},
   {series: 2, color: 'lightblue'},
   {series: 3, color: 'beige'},
   ],
  htmlToolTip: {enabled: true,
   style: {background: 'lavender'},
   autoTitleFont: 'italic 12pt Times New Roman',  
   autoContentFont: 'bold 10pt Verdana'  
  },
*END
ENDSTYLE
END 

The output is:

WebFOCUS