Charting > Special Topics > Generating HTML Tooltips (htmlToolTip)

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": true,
	"mouseMargin": 10,
	"style": "undefined",
	"autoTitleFont": "bold 12pt Sans-Serif",
	"autoContentFont": "10pt Sans-Serif",
	"snap": false,
 "sticky": "auto"
 "fill": 'linear-gradient(to bottom, rgba(250,250,250,0.98) 8%,rgba(230,230,230,0.98) 95%)', 
 "border": {
    			"width": 1, 
     		"color": 'rgba(150,150,150,0.95)', 
     			"cornerRadius": 0
 "cascadeMenuStyle": {
    			"label": {
         				"font": undefined,
         				"color": undefined
          			},
   			 "nameValue": {
         				"name": {
        					      "font": "9pt sans-serif",
        					      "color": "#505050"
               				},
         				"value": {
              					"font": "bold 9pt sans-serif",
              					"color": "black"
                 				}},
      "hover": {
         				"fill": "rgba(220,220,220,0.9)",
         				"labelColor": "black"
           			}  
           		}
              	}

Syntax: How to Generate HTML Tooltips 

"htmlToolTip": {
			"enabled": boolean,
   "mouseMargin": number,  
   "style": "string",
   "autoTitleFont": "string",
   "autoContentFont": "string",
   "snap": boolean, 
   "sticky": boolean ,
   "fill": "string",
   "border": {
    			"width": number, 
     		"color": "string",  
    			"cornerRadius": {"x": value, "y": value} 
           		          },
   "cascadeMenuStyle": {
    			"label": {
         				"font": "string",
         				"color": "string"
          			},
   			 "nameValue": {
         				"name": {
        					      "font": "string",
        					      "color": "string"
               				},
         				"value": {
              					"font": "string",
              					"color": "string"
                 				}},
      "hover": {
         				"fill": "string",
         				"labelColor": "string"
           			}
 

 
			}
              }

where:

"enabled": boolean

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

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

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

"style": "string"

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.
"autoTitleFont": "string"

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".

"autoContentFont": "string"

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".

"snap": boolean

Enables or disables snapped tooltips. Valid values are:

  • true, to enable snap. The tooltip draws at a hardcoded spot next to each riser on the chart.
  • false, to disable snap. The tooltip draws several pixels above the cursor. This is the default value.
"sticky": boolean

Enables or disables sticky tooltips. Valid values are:

  • true, to enable sticky tooltips. 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.
"fill": "string"

Is a color or gradient string that defines the fill for the tooltip container, or undefined. If it is undefined, the fill is the default fill coded in the chart engine. The default value is "linear-gradient(to bottom, rgba(250,250,250,0.98) 8%,rgba(230,230,230,0.98) 95%)".

"border"

Defines the properties of the border of the tooltip container.

"width": number

Defines the width of the border in pixels, or undefined. If undefined, use the default coded in the chart engine. The default value is 1.

"color": "string"

Is a color string that defines the color of the border, or undefined. If undefined, use the default coded in the chart engine. The default value is "rgba(150,150,150,0.95)".

"cornerRadius": {"x": value, "y": value}

Defines the properties of the corners of the tooltip container.

The cornerRadius property can consist of one value or two values. A single zero (0) value generates square corners. This is the default corner shape. Rounded corners can be circular or elliptical. The x and y values denote the size of the circle radius or the semi-major and semi-minor axes of the ellipse, where x and y are orientation-aware and depend on chart orientation. x represents the ordinal axis, and y represents the numeric axis. The default value is 0.

Valid values for x and y are:

  • A number that specifies the radius of the corner in pixels.
  • A percent string such as "20%", that represents a percentage of the ordinal or numeric axis of the riser.
  • A CSS length string such as "5em" or "10px" that specifies the radius of the corner in pixels. For information about CSS length strings, see https://developer.mozilla.org/en-US/docs/Web/CSS/length.
  • An object with "x" and "y" properties (where "x" and "y" can be any of the above) to specify the corner radius along the ordinal axis (x) and numeric axis (y) of the riser.
"cascadeMenuStyle"

Describes the properties of the tooltip menus.

"label"

Defines the properties of simple text in the tooltip.

"font": "string"

Is a string that defines the font of label text. The default value is undefined.

"color": "string"

Is a string that defines the color of label text. The default value is undefined.

"nameValue":

Defines the properties of the field names and field values in the tooltip.

"name"

Defines the properties of the field names in the tooltip.

"font": "string"

Is a string that defines the font of the field names. The default value is "9pt sans-serif".

"color": "string"

Is a string that defines the color of the field names. The default value is "#505050".

"value"

Defines the properties of the field values in the tooltip.

"font": "string"

Is a string that defines the font of the field values. The default value is "bold 9pt sans-serif".

"color": "string"

Is a string that defines the color of the field values. The default value is "black".

"hover"

Defines the properties when the mouse hovers over the tooltip.

"fill": "string"

Defines the hover fill color. The default value is "rgba(220,220,220,0.9)".

"labelColor": "string"

Defines the label hover color for a submenu. The default value is "black".

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:

Example: Formatting Cascading Menus in HTML Tooltips

In the following request, series 0 has the default tooltip with drilldowns defined in the StyleSheet, while series 1 has a custom tooltip with a submenu. The field names are navy and their values are green. The labels are red. The hover fill color is yellow, and the hover label color for the submenu is brown. 

GRAPH FILE wfretail82/wf_retail_lite
SUM COGS_US
GROSS_PROFIT_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, DRILLMENUITEM='Go to Google', TARGET='_blank', URL=http://www.google.com, 
DRILLMENUITEM='Go to Information Builders Tech Library', TARGET='_blank', 
   URL=https://webfocusinfocenter.informationbuilders.com/wfbue/technical-library.html, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
*GRAPH_JS_FINAL
"series": [{
	"series": "reset"},
	{"series": 1, "tooltip": [{
		"entry": "Group: {{group_label}}",
		"children": ["Series Label: {{series_label}}", 
               "Series ID: {{series_id}} "]
	                      }]
            }],
"htmlToolTip": {
    "enabled": true,
    "fill": "linear-gradient(to bottom, cyan 8%, lime 95%)",  
    "border": {
 		        "width": 2,
 	        	"color": "blue"   
 	        	  	},

    "cascadeMenuStyle": {
          "label": {
          "font": "12pt Arial",
          "color": "red"
                   },
          "nameValue": {
		           "name": {
                   "font": "bold 12pt Arial",
                   "color": "navy"
                     },
 		         "value": {
                   "font": "bold 12pt sans-serif",
                   "color": "green"
                      }
                        },
            "hover": {
                   "fill": "yellow",
                   "labelColor": "brown"
                     } 
                         }
                    }
*END
ENDSTYLE
END

The following image shows the mouse hovering over the first drilldown for series 0.

The following image shows the mouse hovering over the submenu for series 1.

 WebFOCUS

Feedback