Defining a Style for Cascading Menus in HTML Tooltips

Syntax: How to Define a Style for Cascading Menus in HTML Tooltips

"htmlToolTip": {
   "cascadeMenuStyle": {
       "label": {
             "font": "string",
             "color": "string"
                },
       "nameValue": {
             "name": {
                   "font": "string",
                   "color": "string"
                     },
             "value": {
                    "font": "string",
                    "color": "string"
                       },
       "hover": {
              "fill": "string",
              "labelColor": "string"
                }
                        }                
             }

where:

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