Whatever message this page gives is out now! Go check it out!
cftooltip
Last update:
May 18, 2026
The cftooltip tag is impacted after deprecation of YUI and Spry libraries in ColdFusion 2016 (Update 3).
For a full list of deprecated features, refer to Deprecated features.
Description
Specifies tool tip text that displays when the user hovers the mouse pointer over the elements in the tag body. This tag does not require a form and is not used inside Flash forms.
Category
Syntax
autoDismissDelay="5000"
hideDelay="250"
preventOverlap="true|false"
showDelay="200"
sourceForTooltip="URL"
style="CSS style specification"
tooltip="text">
Display tags
</cftooltip>This tag must have an end tag.
Note:
You can specify this tag's attribute in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute name as structure key.
See also
cfajaximport, Using Ajax User Interface Components and Features in the Developing ColdFusion Applications
History
ColdFusion 8: Added this tag
Attributes
Attribute | Req/Opt | Default | Description |
autoDismissDelay | Optional | 5000 | The number of milliseconds between the time when the user moves the mouse pointer over the component (and leaves it there) and when the tool tip disappears. |
hideDelay | Optional | 250 | The number of milliseconds to delay between the time when the user moves the mouse pointer away from the component and when the tool tip disappears. |
preventOverlap | Optional | true | A Boolean value specifying whether to prevent the tool tip from overlapping the component that it describes. |
showDelay | Optional | 200 | The number of milliseconds to delay between the time when the user moves the mouse over the component and when the tool tip appears. |
sourceForTooltip | Optional | The URL of a page with the tool tip contents. The page can include HTML markup to control the format, and the tip can include images. If you specify this attribute, an animated icon appears with the text "Loading..." while the tip is being loaded. | |
style | Optional | A CSS style specification for the tooltip. Use this attribute to set the width, text color, background color, padding, and other style properties. | |
tooltip | Optional | Tip text to display. The text can include HTML formatting. Ignored if you specify a sourceForTooltip attribute. |
Usage
Specify a tooltip or a sourceForTooltip attribute; otherwise, this tag has no effect.
If you specify the path to a CFML page in the sourceForTooltip attribute, ColdFusion processes the page and uses its output in the tip text. You can therefore use CFML programming, in addition to HTML formatting, to control the contents and appearance of the tip text. You must use the cftooltip tag for text and simple components, such as images, not for complex Ajax components such as windows, pods, or layout areas. If you use the cftooltip tag with complex components, you might get unexpected behavior; for example, the tool tip might overlap window contents, even if you specify the preventoverlap attribute.
You can nest tool tips within the cfinput, cfgrid, and cfform tags, although this may result in multiple tool tips obscuring one another.
If you specify the path to a CFML page in the sourceForTooltip attribute, ColdFusion processes the page and uses its output in the tip text. You can therefore use CFML programming, in addition to HTML formatting, to control the contents and appearance of the tip text. You must use the cftooltip tag for text and simple components, such as images, not for complex Ajax components such as windows, pods, or layout areas. If you use the cftooltip tag with complex components, you might get unexpected behavior; for example, the tool tip might overlap window contents, even if you specify the preventoverlap attribute.
You can nest tool tips within the cfinput, cfgrid, and cfform tags, although this may result in multiple tool tips obscuring one another.
Example
The following simple example can dynamically display different tool-tip text based on the value of the theItem variable on the main CFML page.
The main CFML page:
The main CFML page:
<cfset theItem="left-handed & other specialty wrenches">
<cfset theImage="lhbwrench.jpg">
<!--- The theItem string has an ampersand, so you must URL-encode it. --->
<cftooltip sourceForTooltip="tiptext.cfm?itemid=#URLEncodedFormat(theItem)#">
<cfoutput>
<b>Try this one!</b>
<img src="#theImage#" />
</cfoutput>
</cftooltip>The tiptext.cfm page could have a single CFML tag:
<cfoutput><b> Click to find more about #URL.itemid# </b></cfoutput>
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Share additional feedback to help us improve.
0/255
|
