cftooltip

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.

History

ColdFusion 8: Added this tag

Syntax

<cftooltip 
    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.

Attributes

Attribute	Description	Required	Default
autoDismissDelay	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.	Optional	5000
hideDelay	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.	Optional	250
preventOverlap	A Boolean value specifying whether to prevent the tool tip from overlapping the component that it describes.	Optional	true
showDelay	The number of milliseconds to delay between the time when the user moves the mouse over the component and when the tool tip appears.	Optional	200
sourceForTooltip	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.	Optional
style	A CSS style specification for the tooltip. Use this attribute to set the width, text color, background color, padding, and other style properties.	Optional
tooltip	Tip text to display. The text can include HTML formatting. Ignored if you specify a sourceForTooltip attribute.	Optional

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.

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:

<!--- These variables could be set dynamically ---> 
<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>

cfmldocs