Adobe ColdFusion 8

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.

Category

Display management tags

Syntax

<cftooltip
    autoDismissDelay="5000"
    hideDelay="250"
    preventOverlap="true|false"
    showDelay="200"
    sourceForTooltip="URL"
    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 UI Components and Features" in the ColdFusion Developer's Guide

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.

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 should 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, 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>