Print Friendly

# Class YAHOO.widget.Tooltip

Package: | YAHOO.widget
Class: | Tooltip
Extends: | Overlay
Defined In: | container.js

Tooltip is an implementation of Overlay that behaves like an OS tooltip, displaying when the user mouses over a particular element, and disappearing on mouse out.

## Public Properties

Property | Defined By
--- | ---
| BOTTOM_LEFT<static> : String | Overlay
<static> Constant representing the top bottom left corner of an element, used for configuring the context eleme...
| BOTTOM_RIGHT<static> : String | Overlay
<static> Constant representing the bottom right corner of an element, used for configuring the context element ...
| CSS_OVERLAY<static> : String | Overlay
<static> Constant representing the default CSS class used for an Overlay
| CSS_TOOLTIP<static> : String | Tooltip
<static> Constant representing the Tooltip CSS class
| TOP_LEFT<static> : String | Overlay
<static> Constant representing the top left corner of an element, used for configuring the context element alig...
| TOP_RIGHT<static> : String | Overlay
<static> Constant representing the top right corner of an element, used for configuring the context element ali...
| cfg : HTMLElement/String @default | Tooltip
Specifies the container element that the Tooltip's markup should be rendered into. @config container
| javascript : String | Overlay
<static> The URL that will be placed in the iframe

## Public Methods

Method | Defined By
--- | ---
| Tooltip(`String el`, `HTMLElement el`, `Object userConfig`) | Tooltip
| align(`String elementAlign`, `String contextAlign`) : void | Overlay
Aligns the Overlay to its context element using the specified corner points (represented by the constants TOP_LEFT, T...
| center() : void | Overlay
Centers the container in the viewport.
| configConstrainToViewport(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "constraintoviewport" property is changed.
| configContainer(`String type`, `Object[] args`, `Object obj`) : void | Tooltip
The default event handler fired when the "container" property is changed.
| configContext(`String type`, `Object[] args`, `Object obj`) : void | Tooltip
The default event handler fired when the "context" property is changed.
| configFixedCenter(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "fixedcenter" property is changed.
| configHeight(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "height" property is changed.
| configIframe(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "iframe" property is changed.
| configText(`String type`, `Object[] args`, `Object obj`) : void | Tooltip
The default event handler fired when the "text" property is changed.
| configVisible(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEve...
| configWidth(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "width" property is changed.
| configX(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "x" property is changed.
| configXY(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "xy" property is changed.
| configY(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "y" property is changed.
| configzIndex(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler fired when the "zIndex" property is changed.
| destroy() : void | Overlay
Removes the Overlay element from the DOM and sets all child elements to null.
| doCenterOnDOMEvent() : void | Overlay
Center event handler used for centering on scroll/resize, but only if the Overlay is visible
| doHide() : void | Tooltip
Sets the timeout for the auto-dismiss delay, which by default is 5 seconds, meaning that a tooltip will automatically...
| doShow(`DOMEvent e`) : Number | Tooltip
Processes the showing of the Tooltip by setting the timeout delay and offset of the Tooltip.
| enforceConstraints(`String type`, `Object[] args`, `Object obj`) : void | Overlay
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
| hideIframe() : void | Overlay
Hides the iframe shim, if it has been enabled
| hideMacGeckoScrollbars() : void | Overlay
Adds a special CSS class to the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot ...
| init(`String el`, `HTMLElement el`, `Object userConfig`) : void | Tooltip
The Tooltip initialization method. This method is automatically called by the constructor. A Tooltip is automatically...
| initDefaultConfig() : void | Tooltip
Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).
| initEvents() : void | Overlay
Initializes the custom events for Overlay which are fired automatically at appropriate times by the Overlay class.
| moveTo(`Number x`, `Number y`) : void | Overlay
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
| onContextMouseMove(`DOMEvent e`, `Object obj`) : void | Tooltip
The default event handler fired when the user moves the mouse while over the context element.
| onContextMouseOut(`DOMEvent e`, `Object obj`) : void | Tooltip
The default event handler fired when the user mouses out of the context element.
| onContextMouseOver(`DOMEvent e`, `Object obj`) : void | Tooltip
The default event handler fired when the user mouses over the context element.
| onDomResize(`DOMEvent e`, `Object obj`) : void | Overlay
Event handler fired when the resize monitor element is resized.
| preventOverlay(`Number pageX`, `Number pageY`) : void | Tooltip
Fired when the Tooltip is moved, this event handler is used to prevent the Tooltip from overlapping with its context ...
| showIframe() : void | Overlay
Shows the iframe shim, if it has been enabled
| showMacGeckoScrollbars() : void | Overlay
Removes a special CSS class from the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars ca...
| syncPosition() : void | Overlay
Synchronizes the Panel's "xy", "x", and "y" properties with the Panel's position in the DOM. This is primarily used t...
| toString() : String | Tooltip
Returns a string representation of the object.
| windowResizeHandler<static>(`DOMEvent e`) : void | Overlay
<static> The DOM event handler used to fire the CustomEvent for window resize
| windowScrollHandler<static>(`DOMEvent e`) : void | Overlay
<static> The DOM event handler used to fire the CustomEvent for window scroll

## Public Events

Event | Defined By
--- | ---
| YAHOO.widget.Overlay.windowResizeEvent : () | Overlay
A singleton CustomEvent used for reacting to the DOM event for window resize
| YAHOO.widget.Overlay.windowScrollEvent : () | Overlay
A singleton CustomEvent used for reacting to the DOM event for window scroll
| beforeMoveEvent : (`Number x`, `Number y`) | Overlay
CustomEvent fired before the Overlay is moved.
| moveEvent : (`Number x`, `Number y`) | Overlay
CustomEvent fired after the Overlay is moved.

## Property Details

### BOTTOM_LEFT<static>

`public String BOTTOM_LEFT<static>`
<static> Constant representing the top bottom left corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### BOTTOM_RIGHT<static>

`public String BOTTOM_RIGHT<static>`
<static> Constant representing the bottom right corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### CSS_OVERLAY<static>

`public String CSS_OVERLAY<static>`
<static> Constant representing the default CSS class used for an Overlay
This property is defined by Overlay.

### CSS_TOOLTIP<static>

`public String CSS_TOOLTIP<static>`
<static> Constant representing the Tooltip CSS class
This property is defined by Tooltip.

### TOP_LEFT<static>

`public String TOP_LEFT<static>`
<static> Constant representing the top left corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### TOP_RIGHT<static>

`public String TOP_RIGHT<static>`
<static> Constant representing the top right corner of an element, used for configuring the context element alignment
This property is defined by Overlay.

### cfg

`public HTMLElement/String @default cfg`
Specifies the container element that the Tooltip's markup should be rendered into. @config container
This property is defined by Tooltip.

### javascript

`public String javascript`
<static> The URL that will be placed in the iframe
This property is defined by Overlay.

## Constructor Details

### Tooltip

`public function Tooltip(`String el`, `HTMLElement el`, `Object userConfig`)`
Parameters:

- `el` : String
  The element ID representing the Tooltip OR
- `el` : HTMLElement
  The element representing the Tooltip
- `userConfig` : Object
  The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.

## Method Details

### align

`public function align(`String elementAlign`, `String contextAlign`)`
Aligns the Overlay to its context element using the specified corner points (represented by the constants TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, and BOTTOM_RIGHT.
Parameters:

- `elementAlign` : String
  The String representing the corner of the Overlay that should be aligned to the context element
- `contextAlign` : String
  The corner of the context element that the elementAlign corner should stick to.

Returns:

- `void`

This method is defined by Overlay.

### center

`public function center()`
Centers the container in the viewport.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### configConstrainToViewport

`public function configConstrainToViewport(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "constraintoviewport" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configContainer

`public function configContainer(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "container" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Tooltip.

### configContext

`public function configContext(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "context" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Tooltip.

### configFixedCenter

`public function configFixedCenter(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "fixedcenter" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configHeight

`public function configHeight(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "height" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configIframe

`public function configIframe(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "iframe" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configText

`public function configText(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "text" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Tooltip.

### configVisible

`public function configVisible(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEvent and hideEvent.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configWidth

`public function configWidth(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "width" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configX

`public function configX(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "x" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configXY

`public function configXY(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "xy" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configY

`public function configY(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "y" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### configzIndex

`public function configzIndex(`String type`, `Object[] args`, `Object obj`)`
The default event handler fired when the "zIndex" property is changed.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### destroy

`public function destroy()`
Removes the Overlay element from the DOM and sets all child elements to null.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### doCenterOnDOMEvent

`public function doCenterOnDOMEvent()`
Center event handler used for centering on scroll/resize, but only if the Overlay is visible
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### doHide

`public function doHide()`
Sets the timeout for the auto-dismiss delay, which by default is 5 seconds, meaning that a tooltip will automatically dismiss itself after 5 seconds of being displayed.
Parameters:

- None.

Returns:

- `void`

This method is defined by Tooltip.

### doShow

`public function doShow(`DOMEvent e`)`
Processes the showing of the Tooltip by setting the timeout delay and offset of the Tooltip.
Parameters:

- `e` : DOMEvent
  The current DOM event

Returns:

- `Number`
  The process ID of the timeout function associated with doShow

This method is defined by Tooltip.

### enforceConstraints

`public function enforceConstraints(`String type`, `Object[] args`, `Object obj`)`
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
Parameters:

- `type` : String
  The CustomEvent type (usually the property name)
- `args` : Object[]
  The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
- `obj` : Object
  The scope object. For configuration handlers, this will usually equal the owner.

Returns:

- `void`

This method is defined by Overlay.

### hideIframe

`public function hideIframe()`
Hides the iframe shim, if it has been enabled
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### hideMacGeckoScrollbars

`public function hideMacGeckoScrollbars()`
Adds a special CSS class to the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot be hidden. See https://bugzilla.mozilla.org/show_bug.cgi?id=187435
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### init

`public function init(`String el`, `HTMLElement el`, `Object userConfig`)`
The Tooltip initialization method. This method is automatically called by the constructor. A Tooltip is automatically rendered by the init method, and it also is set to be invisible by default, and constrained to viewport by default as well.
Parameters:

- `el` : String
  The element ID representing the Tooltip OR
- `el` : HTMLElement
  The element representing the Tooltip
- `userConfig` : Object
  The configuration object literal containing the configuration that should be set for this Tooltip. See configuration documentation for more details.

Returns:

- `void`

This method is defined by Tooltip.

### initDefaultConfig

`public function initDefaultConfig()`
Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).
Parameters:

- None.

Returns:

- `void`

This method is defined by Tooltip.

### initEvents

`public function initEvents()`
Initializes the custom events for Overlay which are fired automatically at appropriate times by the Overlay class.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### moveTo

`public function moveTo(`Number x`, `Number y`)`
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
Parameters:

- `x` : Number
  The Overlay's new x position
- `y` : Number
  The Overlay's new y position

Returns:

- `void`

This method is defined by Overlay.

### onContextMouseMove

`public function onContextMouseMove(`DOMEvent e`, `Object obj`)`
The default event handler fired when the user moves the mouse while over the context element.
Parameters:

- `e` : DOMEvent
  The current DOM event
- `obj` : Object
  The object argument

Returns:

- `void`

This method is defined by Tooltip.

### onContextMouseOut

`public function onContextMouseOut(`DOMEvent e`, `Object obj`)`
The default event handler fired when the user mouses out of the context element.
Parameters:

- `e` : DOMEvent
  The current DOM event
- `obj` : Object
  The object argument

Returns:

- `void`

This method is defined by Tooltip.

### onContextMouseOver

`public function onContextMouseOver(`DOMEvent e`, `Object obj`)`
The default event handler fired when the user mouses over the context element.
Parameters:

- `e` : DOMEvent
  The current DOM event
- `obj` : Object
  The object argument

Returns:

- `void`

This method is defined by Tooltip.

### onDomResize

`public function onDomResize(`DOMEvent e`, `Object obj`)`
Event handler fired when the resize monitor element is resized.
Parameters:

- `e` : DOMEvent
  The resize DOM event
- `obj` : Object
  The scope object

Returns:

- `void`

This method is defined by Overlay.

### preventOverlay

`public function preventOverlay(`Number pageX`, `Number pageY`)`
Fired when the Tooltip is moved, this event handler is used to prevent the Tooltip from overlapping with its context element.
Parameters:

- `pageX` : Number
  The x coordinate position of the mouse pointer
- `pageY` : Number
  The y coordinate position of the mouse pointer

Returns:

- `void`

This method is defined by Tooltip.

### showIframe

`public function showIframe()`
Shows the iframe shim, if it has been enabled
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### showMacGeckoScrollbars

`public function showMacGeckoScrollbars()`
Removes a special CSS class from the Overlay when Mac/Gecko is in use, to work around a Gecko bug where scrollbars cannot be hidden. See https://bugzilla.mozilla.org/show_bug.cgi?id=187435
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### syncPosition

`public function syncPosition()`
Synchronizes the Panel's "xy", "x", and "y" properties with the Panel's position in the DOM. This is primarily used to update position information during drag & drop.
Parameters:

- None.

Returns:

- `void`

This method is defined by Overlay.

### toString

`public function toString()`
Returns a string representation of the object.
Parameters:

- None.

Returns:

- `String`
  The string representation of the Tooltip

This method is defined by Tooltip.

### windowResizeHandler<static>

`public function windowResizeHandler<static>(`DOMEvent e`)`
<static> The DOM event handler used to fire the CustomEvent for window resize
Parameters:

- `e` : DOMEvent
  The DOM resize event

Returns:

- `void`

This method is defined by Overlay.

### windowScrollHandler<static>

`public function windowScrollHandler<static>(`DOMEvent e`)`
<static> The DOM event handler used to fire the CustomEvent for window scroll
Parameters:

- `e` : DOMEvent
  The DOM scroll event

Returns:

- `void`

This method is defined by Overlay.

## Event Details

### YAHOO.widget.Overlay.windowResizeEvent

`public event YAHOO.widget.Overlay.windowResizeEvent`
A singleton CustomEvent used for reacting to the DOM event for window resize
Subscribers will be called with the following parameters:

- None.

This event is defined by Overlay.

### YAHOO.widget.Overlay.windowScrollEvent

`public event YAHOO.widget.Overlay.windowScrollEvent`
A singleton CustomEvent used for reacting to the DOM event for window scroll
Subscribers will be called with the following parameters:

- None.

This event is defined by Overlay.

### beforeMoveEvent

`public event beforeMoveEvent`
CustomEvent fired before the Overlay is moved.
Subscribers will be called with the following parameters:

- `x` : Number
  x coordinate
- `y` : Number
  y coordinate

This event is defined by Overlay.

### moveEvent

`public event moveEvent`
CustomEvent fired after the Overlay is moved.
Subscribers will be called with the following parameters:

- `x` : Number
  x coordinate
- `y` : Number
  y coordinate

This event is defined by Overlay.

Copyright © 2006 Jack Slocum. All rights reserved.