graph » series » tooltip
tooltip
[ root » graph » series » tooltip ]
Tooltips are labels that appear when users hover over data points (nodes) on your chart. They can display any combination of values, text, and/or tokens. In addition to standard tooltips, ZingChart offers the functionality to create sticky tooltips, fixed tooltips, and HTML tooltips. Refer to the Tooltips Tutorial for more information.
| Attribute | Type | Info |
|---|---|---|
| alpha | Numeric | Sets the transparency of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal. For graph plot tooltip. 0.3 | 0.9 | ... |
| angle | Numeric | Sets the rotation angle of the object/shape. For graph plot tooltip. -45 | 115 | ... |
| background-color backgroundColor | String | Sets the background color of the object. Colors can be entered by name (e.g., "red", "blue", "yellow"), in hexadecimal notation (e.g., "#FF0000", "#0000FF", "#FFFF00"), or in RGB notation (e.g., "rgb(255,0,0)", "rgb(0,0,255)", "rgb(255,255,0)"). For graph plot tooltip. "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| background-color-1 backgroundColor1 | String | Sets the first color of a 2 color background gradient of the object. To be used with "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| background-color-2 backgroundColor2 | String | Sets the second color of a 2 color background gradient of the object. To be used with "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| background-fit backgroundFit | String | Sets the direction/s on which the background image is being "stretched". For graph plot tooltip. "x" | "y" | "xy" |
| background-image backgroundImage | String | Sets a background image for the object. Value can be a local file or a web image's location. For graph plot tooltip. "image.png" | ... |
| background-position backgroundPosition | String | Sets the position of the background when the "0 0" | "50 100" | "80% 60%" | ... |
| background-repeat backgroundRepeat | String | Sets the repeating mode for the background image. For graph plot tooltip. "no-repeat" | "repeat" | "repeat-x" | "repeat-y" |
| border-alpha borderAlpha | Numeric | Sets the transparency of the border. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal. 0.3 | 0.9 | ... |
| border-bottom borderBottom | String | Sets the object's bottom border style. Accepts solid, dashed, and dotted styles. For graph plot tooltip. "2px solid #f00" | ... |
| border-color borderColor | String | Sets the border color of the object. For graph plot tooltip. "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| border-left borderLeft | String | Sets the object's left border style. Accepts solid, dashed, and dotted styles. For graph plot tooltip. "2px solid #f00" | ... |
| border-radius borderRadius | Mixed | Sets the object's border radius for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A single value will affect all 4 corners; multiple values will have separate effects on each corner, with the first value affecting the top-left corner, the second value affecting the top-right corner, and so on, in a clockwise direction. For graph plot tooltip. 4 | "6px" | "6px 10px 3px 5px" | "-10px" | ... |
| border-radius-bottom-left borderRadiusBottomLeft | Mixed | Sets the object's bottom-left border radius for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. For graph plot tooltip. 4 | "6px" | "-6px" | -4 | ... |
| border-radius-bottom-right borderRadiusBottomRight | Mixed | Sets the object's bottom-right border radius for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. For graph plot tooltip. 4 | "6px" | "-6px" | -4 | ... |
| border-radius-top-left borderRadiusTopLeft | Mixed | Sets the object's top-left border radius for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. For graph plot tooltip. 4 | "6px" | "-6px" | -4 | ... |
| border-radius-top-right borderRadiusTopRight | Mixed | Sets the object's top-right border radius for rounded corners. Larger values create rounder corners, while smaller values create sharper corners. A negative value will cut a corner off without rounding. For graph plot tooltip. 4 | "6px" | "-6px" | -4 | ... |
| border-right borderRight | String | Sets the object's right border style. Accepts solid, dashed, and dotted styles. For graph plot tooltip. "2px solid #f00" | ... |
| border-top borderTop | String | Sets the object's top border style. Values must include the border width, style, and color. Accepts solid, dashed, and dotted styles. For graph plot tooltip. "2px solid #f00" | ... |
| border-width borderWidth | Mixed | Sets the border width of the object. For graph plot tooltip. 4 | "6px" | ... |
| callout | Boolean | Sets whether an object will have a callout arrow or not. For graph plot tooltip. true | false | 1 | 0 |
| callout-height calloutHeight | Mixed | Sets the height of the object's callout arrow. A larger value will create a taller callout arrow. For graph plot tooltip. 4 | "6px" | ... |
| callout-hook calloutHook | Array | Sets the point of the tip of the callout arrow to a specified coordinate on the chart, with the starting point of [0,0] being the top left corner of the chart. For graph plot tooltip. [200, 50] | ... |
| callout-offset calloutOffset | Mixed | Sets the offset along the callout direction of the arrow's base. Positive and negative values can be used to offset the callout arrow up, down, left, or right depending on the 4 | "6px" | ... |
| callout-position calloutPosition | String | Sets the position for the object's callout arrow. The position is "bottom" by default. For graph plot tooltip. "top" | "right" | "bottom" | "left" |
| callout-width calloutWidth | Mixed | Sets the width of the object's callout arrow. A larger value will create a wider callout arrow. For graph plot tooltip. 4 | "6px" | ... |
| clip-text clipText | Boolean | Cuts off extra text. Use with width. For graph plot tooltip. true | false | 1 | 0 |
| color | String | Sets the text's color of the tooltip. Similar with "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| fill-angle fillAngle | Numeric | Sets the angle of the axis along which the linear gradient is drawn. For graph plot tooltip. -45 | 115 | ... |
| fill-offset-x fillOffsetX | Mixed | Sets an X offset to apply to the fill. For graph plot tooltip. 4 | "6px" | ... |
| fill-offset-y fillOffsetY | Mixed | Sets a Y offset to apply to the fill. For graph plot tooltip. 4 | "6px" | ... |
| fill-type fillType | String | Sets the background gradient fill type to either linear or radial. For graph plot tooltip. "linear" | "radial" |
| font-angle fontAngle | Numeric | Sets the rotation angle of the text of the tooltip. Similar with -45 | 115 | ... |
| font-color fontColor | String | Sets the text's color of the tooltip. Similar with "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| font-family fontFamily | String | Sets the text's font family of the tooltip. "Arial" | "Tahoma,Verdana" | ... |
| font-size fontSize | Mixed | Sets the text's font size of the tooltip. 4 | "6px" | ... |
| font-style fontStyle | String | Sets the text's font style of the tooltip. Similar with "none" | "italic" | "oblique" |
| font-weight fontWeight | String | Sets the text's font weight of the tooltip. Similar with "normal" | "bold" |
| gradient-colors gradientColors | String | Sets a set of colors for a complex background gradient consisting of 2 or more colors. To be used with "#f00 #0f0 #00f" | ... |
| gradient-stops gradientStops | String | Sets the gradient stops for a complex background gradient consisting of 2 or more colors. To be used with "0.1 0.5 0.9" | ... |
| height | Mixed | Sets the object's height. For graph plot tooltip. 10 | "20px" | 0.3 | "30%" | ... |
| html-mode htmlMode | Boolean | To create HTML tooltips. Set the value to true | false | 1 | 0 |
| margin | Mixed | Sets the object's margins. For graph plot tooltip. Works with 10 | "5px" | "10 20" | "5px 10px 15px 20px" | ... |
| margin-bottom marginBottom | Mixed | Sets the object's bottom margin. For graph plot tooltip. Works with 4 | "6px" | ... |
| margin-left marginLeft | Mixed | Sets the object's left margin. For graph plot tooltip. Works with 4 | "6px" | ... |
| margin-right marginRight | Mixed | Sets the object's right margin. For graph plot tooltip. Works with 4 | "6px" | ... |
| margin-top marginTop | Mixed | Sets the object's top margin. For graph plot tooltip. Works with 4 | "6px" | ... |
| max-chars maxChars | Numeric | Sets the maximum numbers of characters displayed in the object. The value determines how many characters will be displayed before the text is cut and appended with "..." For graph plot tooltip. Works with 5 | 10 | ... |
| max-width maxWidth | Mixed | Sets the maximum width of the text box. If text is longer than the max-width value, it will overlap the box or will wrap if wrap-text is set to true. For graph plot tooltip. Works with 10 | "20px" | 0.3 | "30%" | ... |
| offset-x offsetX | Mixed | Sets an X offset to apply when positioning the object/shape. For graph plot tooltip. 4 | "6px" | ... |
| offset-y offsetY | Mixed | Sets a Y offset to apply when positioning the object/shape. For graph plot tooltip. 4 | "6px" | ... |
| padding | Mixed | Sets the object's padding around the text of the tooltip. 10 | "5px" | "10 20" | "5px 10px 15px 20px" | ... |
| padding-bottom paddingBottom | Mixed | Sets the object's bottom padding around the text of the tooltip. 4 | "6px" | ... |
| padding-left paddingLeft | Mixed | Sets the object's left padding around the text of the tooltip. 4 | "6px" | ... |
| padding-right paddingRight | Mixed | Sets the object's right padding around the text of the tooltip. 4 | "6px" | ... |
| padding-top paddingTop | Mixed | Sets the object's top padding around the text of the tooltip. 4 | "6px" | ... |
| placement | String | Specifies where tooltips are fixed relative to their node values. Refer to the applicable chart types page for more information. Options by Chart Type: "node:top" | "node:center" | "node:out" | ... |
| position | String | Sets the object's position relative to its container. Similar results can be obtained by setting margin and margin-... attributes. For graph plot tooltip. |
| rtl (right-to-left) | Boolean | Renders text right-to-left. Default value is false. true | false | 1 | 0 |
| shadow | Boolean | Sets whether the object's shadow is visible or not. Has limited effect on HTML5 implementation. true | false | 1 | 0 |
| shadow-alpha shadowAlpha | Numeric | Sets the transparency of the shadow of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal. 0.3 | 0.9 | ... |
| shadow-angle shadowAngle | Numeric | Sets the angle of the shadow underneath the object. -45 | 115 | ... |
| shadow-blur shadowBlur | Mixed | Sets the blur effect size for the shadow of the object. Has limited effect on HTML5 implementation. 4 | "6px" | ... |
| shadow-color shadowColor | String | Sets the color of the shadow of the object. "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ... |
| shadow-distance shadowDistance | Mixed | Sets the distance between the shadow and the object. 4 | "6px" | ... |
| sticky | Boolean | To create sticky tooltips. Use this with the true | false | 1 |0 |
| text | String | Specifies what text to display in your tooltips. (By default, chart data values are displayed.) You can provide any alphanumeric characters and/or ZingChart tokens combination. "%v" | "Total Sales: %v" | "%v %t" | "..." |
| text-alpha textAlpha | Numeric | Sets the transparency of the text. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal. 0.3 | 0.9 | ... |
| timeout | Numeric | To create sticky tooltips. Provide a value in milliseconds. Use this with the 30000 | 10000 | ... |
| visible | Boolean | Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON. true | false | 1 | 0 |
| width | Mixed | Sets the object's width. 10 | "20px" | 0.3 | "30%" | ... |
| wrap-text wrapText | Boolean | Sets whether the text will wrap, depending on the width of the object. For graph plot tooltip. true | false | 1 | 0 |
| x | Mixed | To create fixed tooltips. This attribute specifies the "x" position of your tooltips, and can be used with the 10 | "20px" | 0.3 | "30%" | ... |
| y | Mixed | To create fixed tooltips. This attribute specifies the "y" position of your tooltips, and can be used with the 10 | "20px" | 0.3 | "30%" | ... |
| z-index zIndex | Numeric | Sets the z position of the object. Objects with higher z indexes will appear "above" those with lower z index values. 5 | 10 | ... |