Custom Tooltip

You can create a custom tooltip by using HTML markup to style the tooltip text. The tooltip can incorporate data values in java.text.MessageFormat format.

To create a custom tooltip, follow the steps below:

1. Right-click the chart, and select 'Properties' from the context menu. This opens the 'Chart Properties' dialog box.

2. Click the General tab.

3. Select the 'Tooltip' option, and click the 'Customize' button. This opens the 'Customize Tooltip' dialog box.

4. Select the 'Custom' option, and enter the desired tooltip markup into the edit box.

The indices for the available columns are listed at the bottom of the dialog box.

 

You can use HTML tags to style the text (e.g., <b>, <i>, <u>, <font>) and to create line breaks (<br/>), etc. To insert data into the tooltip, enter the index of a data column within curly braces, e.g., {1}. Use java.text.MessageFormat format to format the inserted data. For example:

See Format Tab for information about for­mat masks.

<b>Date</b>: {0, date, MMM-yy}

<b>Sales</b>: {1, number, $#,###.00}

To create even more complex text-based tooltips, you can use the Data Tip View, and specify a group of text elements as the data view assembly to display.

Example: Custom Tooltip  >>

In this example, you will create a chart that displays quantity purchased by company. When the user hovers the mouse over a given company (e.g., “Rutgers Bank”), the Chart will display a tooltip similar to the following:

Rutgers Bank
27 units purchased

Follow the steps below:

1. Create a new Viewsheet based on the sample 'US Sales' Work­sheet.

2. Drag a Chart element onto the Viewsheet grid.

3. Click the center of the Chart (or click the 'Edit' button at the top-right). This opens the Chart Editor. Make the following selections:

a. From the 'Dimensions' node in the Data Source panel, drag the 'Company' dimension to the 'X' field in the Data panel.

b. From the 'Measures' node in the Data Source panel, drag the 'Quantity Purchased' measure to the 'Y' field in the Data panel. This creates a chart that displays quantity purchased for each company.

c. Click the 'Edit Dimension' button, and select 'Ranking' to display only the top 10 companies. Click the 'Apply' button.

 

d. Right-click on the one of the Chart's X-axis labels, and select 'Axis Properties' from the context menu. Choose a slanted text rotation and a smaller font size to improve the axis appearance. Click 'OK'.

e. Resize the chart as desired.

 

4. Right-click the Chart, and select 'Properties' from the context menu. This opens the 'Chart Properties' dialog box.

a. Under the General tab, select the 'Tooltip' option, and click 'Custom'. This opens the 'Customize Tooltip' dialog box.

b. Select the 'Custom' option and enter the following in the text field:

<b>{0}</b><br />{1} units purchased

c. Click 'OK' to close the 'Customize Tooltip' dialog box, and click 'OK' again to close the 'Chart Properties' dialog box.

When you hover the mouse over the bars on the chart, you will now see the custom tooltip you specified.

 

 

See Also

Data Tip View, to create complex tooltips using Viewsheet components.

Adding a Non-Displaying Measure to a Chart, to utilize a measure in the tooltip which is not displayed on the chart.

<< Chart Properties: General Tab © 1996-2013 InetSoft Technology Corporation (v11.4) Data Tip View >>