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 }
htmlToolTip: { enabled: boolean, mouseMargin: number, style: 'string', autoTitleFont: 'string', autoContentFont: 'string', snap: boolean }
where:
Enables or disables HTML-based tooltips. Valid values are:
Is the distance from the top of the cursor to the bottom of the tooltip, in pixels.
Defines the style of the tooltip. Valid values are:
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'.
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'.
Enables or disables sticky tooltips. Valid values are:
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 |