Using Tooltips
- Overview
- Available tooltips and XML settings syntax
- Text and Text Formatting
- Background Settings
- Font Settings
Tooltip Overview
Tooltips are small windows that appear when you hover your mouse pointer over a certain element. AnyGantt has the ability to show tooltips in for several elements, and, just as labels for tasks and periods - supports custom attribute tokens in text formatting.
Available tooltips and XML settings syntax
Tooltips for different project types and different chart elements of Gantt Chart are configured in different places in XML, but tooltips settings are the same for all of them - you can use tooltips settings XML from this article in any of them.
Task Project
In Task Project tooltip can appear on task hover and Data Grid. Tooltip can be configured in Task Style both for a task displayed on Timeline plot, and for Data Grid row, that shows task details (they can show different data and have different appearance).
Sample XML for tuning tooltips in Task Style:
<tooltip enabled="true">
<text>Timeline - Name: {%Name}</text>
<font bold="true" color="Black" />
</tooltip>
<row_datagrid>
<tooltip enabled="true">
<text>Datagrid - Name: {%Name}</text>
<font bold="true" color="DarkRed" />
</tooltip>
</row_datagrid>
</task_style>
This style can be applied both to the given task on the plot using style attribute in <task> node:
<task style="sampleStyle"/>, and to the whole project using defaults. Sample below shows modification of all tooltips in the project via default style (read more about Default Styles):
![]() |
Resource Project
In resource Project Data Grid tooltip is configured in Resource Style, and period tooltip - in Period Style.
XML Syntax of Data Grid tooltip configuration using Resource Style:
<row_datagrid>
<tooltip enabled="true">
<text>RESOURCE-STYLE - {%Name}</text>
<font color="DarkRed" bold="true" />
<fill enabled="true" type="Solid" color="White" opacity="0.9" />
<border enabled="true" type="Solid" color="DarkRed" thickness="1" />
<margin left="10" top="2" right="10" bottom="2" />
</tooltip>
</row_datagrid>
</resource_style>
XML Syntax of period tooltip configuration using Period Style:
</div>
These styles can be applied directly to a period or resource using style attributes of <resource> and <period> nodes: <resource style="resStyle"/> or <period style="prStyle"/>, or to all resources and periods using defaults (Read more about Default Styles).
Live sample shows modification of all tooltips via default styles for resources and periods:
![]() |
Text and Text Formatting
AnyGantt has a wide range of features for text formatting in tooltips. You can either set static text for any selected or all tasks, or use tokens to create different labels that are based on built-in or custom tokens.
To set text in tooltip you should use <text> subnode of <tooltip> node. The text is set within opening and closing <text></text> tag. If you need special characters - do not forget to use CDATA.
Sample static text:
<text>Sample Text</text>
</tooltip>
Special characters sample:
<text><![CDATA[<TEXT>]]></text>
</tooltip>
Using built-in tokens
When you configure Gantt chart you supply a lot of data, like task name, start, end, progress and so on.
All these data can be used in tooltips using special tokens. You can use the alone or combine with static text - just as you chart requires. When real chart is displayed - tokens are replaced with actual data.
This sample shows how name token is used:
<text>Task Name: {%Name}</text>
</tooltip>
Here is a full list ob built-in tokens:
Token | Description |
---|---|
{%RowNum} | Row index (task, resource) |
{%ID} | Identifier (task, resource) |
{%Name} | Name (task, resource) |
{%ActualStart} | Actual start (task). If task has several intervals - this refers to the first interval start. |
{%ActualEnd} | Actual end (task). If task has several intervals - this refers to the last interval end. If you have resource project - the last period end. |
{%BaselineStart} | Task only. Baseline start. If task has several intervals - this refers to the first interval start. |
{%BaselineEnd} | Task only. Baseline end. If task has several intervals - this refers to the last interval start. |
{%Complete} | Task only. Progress (without %) |
{%CompleteDate} | Task only. Progress date. |
{%PeriodStart} | Resource only. Period start. |
{%PeriodEnd} | Resource only. Period end. |
{%IntervalStart} | Task only. Interval start. |
{%IntervalEnd} | Task only. Interval End. |
{%Duration} | The duration of actual time for tasks or period duration. |
{%BaselineDuration} | Task only. Baseline plan duration. |
Lets create a style with a tooltip. The tooltip uses static text and tokens. Here is the XML:
<text>
Task Name: {%Name}
Start Date: {%ActualStart}
End Date: {%ActualEnd}
Complete: {%Complete}%
Duration: {%Duration}
</text>
</tooltip>
Which allows us to show chart with tooltip like that:
![]() |
Using Custom Attributes as text source for the tooltips.
Besides of explicit setting of the tooltip text and usage of built-in tokens you can use custom attributes attaches to resources, periods or tasks. Custom attributes can hold any data of your choice.
In XML snippet below you can see how custom attributes are defined for tasks. Each task has two attributes: Status and Person. First contains status description and second holds a name of person in charge:
<tasks>
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14">
<attributes>
<attribute name="Status">In Progress</attribute>
<attribute name="Person">Steve Shafer</attribute>
</attributes>
</task>
<task id="02" name="Task 02" actual_start="2008.07.08" actual_end="2008.07.17" progress="34">
<attributes>
<attribute name="Status">Stopped</attribute>
<attribute name="Person">Donald Horn</attribute>
</attributes>
</task>
<task id="03" name="Task 03" actual_start="2008.07.06" actual_end="2008.07.15" progress="78">
<attributes>
<attribute name="Status">In Progress</attribute>
<attribute name="Person">Kevin Mitchell</attribute>
</attributes>
</task>
</tasks>
</project_chart>
When custom attributes are defined you can use them in text of tooltip, you just need to use certain syntax. Below you can see XML, where tooltip text is templated using custom attributes.
In <tooltip> node we add <text> subnode with custom attribute token in it. The syntax of any custom attribute usage is {%ATTRIBUTE_NAME}, where ATTRIBUTE_NAME - the name of attribute.
<text>{%Status}</text>
</tooltip>
Finally, you can take a look at the sample with tooltip that uses custom attributes and {%Complete} token to show task progress:
<text>
Task Name: {%Name}
Status: {%Status}
Manager: {%Person}
Complete: {%Complete}%
</text>
</tooltip>
Take a look at the live sample:
![]() |
Background Settings
Tooltip background is configured using <fill> and<border> nodes. <margin> allows to define text margins.
Sample XML of Background Settings:
<text>Sample Text</text>
<fill enabled="true" type="Solid" color="White" opacity="0.9" />
<border enabled="true" type="Solid" color="DarkRed" thickness="1" />
<margin left="10" top="2" right="10" bottom="2" />
</tooltip>
Sampe shows Resource project with default style defined and fill and border modified:
![]() |
Font Settings
Font can be set for a whole tooltip (unless you use HTML) and configured in <font> subnode, of <tooltip> node. Sample XML:
<font face="Verdana" color="#252525" size="10" bold="true" italic="false" underline="false" />
<text>Sample Text</text>
</tooltip>
Full set of font settings:
Attribute | Description |
---|---|
face | The name of the font for text |
color | Text Color |
size | The point size of text |
bold | Specifies whether the text is boldface |
italic | Indicates whether text is italicized |
underline | Indicates whether the text is underlined |
render_as_html | Sets whether text is rendered as HTML |
This sample shows tooltip with custom font settings:
![]() |
Using HTML Formatting
If you want to do a complex formatting of the text - consider using HTML formatting. To enable it you have to set render_as_html = "True" in <font> node. Then you need to use CDATA section with HTML tags within <format> or <text> nodes:
<font render_as_html="True" />
<text><![CDATA[ <b>Task Name:</b> {%Name} ]]></text>
</tooltip>
Few HTML tags are supported (Flash Player limitation):
Tag | Description |
---|---|
Bold tag | The <b> tag renders text as bold. A bold typeface must be available for the font used. |
Break tag | The <br> tag creates a line break in the text field. You must set the text field to be a multi line text field to use this tag. |
Font tag | The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:
|
Italic tag | The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used. |
Paragraph tag | The <p> tag creates a new paragraph. You must set the text field to be a multi line text field to use this tag. The <p> tag supports the following attributes:
|
Underline tag | The <u> tag underlines the tagged text. |
Here is a sample with HTML formatted text :
![]() |