XUL:tooltip

From MDC

« XUL Reference home    [ Examples | Attributes | Properties | Methods | Related ]

This element is used for the tooltip popups. For text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element.

More information is available in the XUL tutorial.

Attributes

crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position

Properties

accessibleType, label, popupBoxObject, position, state

Methods

hidePopup, moveTo, openPopup, openPopupAtScreen, showPopup, sizeTo

[edit] Examples

<tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
  <label value="Click here to see more information"/>
  <label value="Really!" style="color: red;"/>
</tooltip>

<vbox>
  <button label="Simple" tooltiptext="A simple popup"/>
  <button label="More" tooltip="moretip"/>
</vbox>

[edit] Attributes

Inherited from XUL element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

crop

Type: one of the values below

If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.

• start: The text will be cropped on its left side.
• end: The text will be cropped on its right side.
• left: Deprecated The text will be cropped on its left side.
• right: Deprecated The text will be cropped on its right side.
• center: The text will be cropped in the middle, showing both the start and end of the text normally.
• none: The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.

default

Type: boolean

If true, the tooltip is used as the default popup for displaying tooltips in the window.

label

Type: string

The label that will appear on the element. If this is left out, no text appears.

noautohide

Type: boolean

If this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. If this attribute is set to true, this will not happen and the tooltip will only hide when the user moves the mouse to another element.

onpopuphidden

Type: script code

This event is sent to a popup after it has been hidden.

onpopuphiding

Type: script code

This event is sent to a popup when it is about to be hidden.

onpopupshowing

Type: script code

This event is sent to a popup just before it is opened. This handler is usually used to dynamically set the contents when the user requests to display it. Returning false from this event handler prevents the popup from appearing.

onpopupshown

Type: script code

This is event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.

position

Type: one of the values below

The position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. This allows you to place the popup on one side of a button.

• after_start: The popup appears underneath the element with the popup's upper-left corner aligned with the lower-left corner of the element. The left edges of the element and the popup are aligned. This is typically used for drop-down menus.
• after_end: The popup appears underneath the element with the popup's upper-right corner aligned with the lower-right corner of the element. The right edges of the element and the popup are aligned.
• before_start: The popup appears above the element with the popup's lower-left corner aligned with the upper-left corner of the element. The left edges of the element and the popup are aligned.
• before_end: The popup appears above the element with the popup's lower-right corner aligned with the upper-right corner of the element. The right edges of the element and the popup are aligned.
• end_after: The popup appears to the right of the element with the popup's lower-left corner aligned with the lower-right corner of the element. The bottom edges of the element and the popup are aligned.
• end_before: The popup appears to the right of the element with the popup's upper-left corner aligned with the upper-right corner of the element. The top edges of the element and the popup are aligned.
• start_after: The popup appears to the left of the element with the popup's lower-right corner aligned with the lower-left corner of the element. The bottom edges of the element and the popup are aligned.
• start_before: The popup appears to the left of the element with the popup's upper-right corner aligned with the upper-left corner of the element. The top edges of the element and the popup are aligned.
• overlap: The popup appears over top of the element with the upper-left corners aligned.
• at_pointer: The popup appears at the same position as the mouse pointer.
• after_pointer: The popup appears at the same horizontal position as the mouse pointer, but vertically, it is placed just below the element.

[edit] Properties

Inherited from XUL element align, allowEvents, boxObject, builder, className, collapsed, contextMenu, controllers, currentItem, database, datasources, dir, flex, height, hidden, id, left, listBoxObject, maxHeight, maxWidth, menu, minHeight, minWidth, observes, ordinal, orient, pack, persist, ref, resource, statusText, style, tooltip, tooltipText, top, value, width Inherited from DOM element attributes, childNodes, cloneNode, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, tagName

accessibleType

Type: integer

A value indicating the type of accessibility object for the element.

label

Type: string

Gets and sets the value of the label attribute.

popupBoxObject

Type: nsIPopupBoxObject

This read-only property holds the nsIPopupBoxObject that implements the popup. You wouldn't normally need to use this property as all of its functions are available via the popup itself.

position

Type: string

Gets and sets the value of the position attribute.

state New in Firefox 3

Type: string

This read only property indicates whether the popup is open or not. Four values are possible:

• closed: The popup is closed and not visible.
• open: The popup is open and visible on screen.
• showing: A request has been made to open the popup, but it has not yet been shown. This state will occur during the popupshowing event.
• hiding: The popup is about to be hidden. This state will occur during the popuphiding event.

[edit] Methods

Inherited from XUL element blur, click, doCommand, focus, getElementsByAttribute Inherited from DOM element addEventListener, appendChild, dispatchEvent, getAttribute, getAttributeNode, getAttributeNodeNS, getAttributeNS, getElementsByTagName, getElementsByTagNameNS, hasAttribute, hasAttributeNS, hasAttributes, hasChildNodes, insertBefore, isSupported, normalize, removeAttribute, removeAttributeNode, removeAttributeNS, removeChild, removeEventListener, replaceChild, setAttribute, setAttributeNode, setAttributeNodeNS, setAttributeNS

hidePopup()

Return type: no return value

Closes the popup immediately.

moveTo( x, y )

Return type: no return value

Moves the popup to a new location.

openPopup( anchor , position , x , y , isContextMenu, attributesOverride ) New in Firefox 3

Return type: no return value

Open the popup relative to a specified node at a specific location.

The popup may be either anchored to another node or opened freely. To anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored.

Possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, after_pointer

The anchor node does not need to be in the same document as the popup.

If the attributesOverride argument is true, the position attribute on the popup node overrides the position value argument. If attributesOverride is false, the attribute is only used if the position argument is empty.

For an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in CSS pixels.

Unanchored popups may be created by supplying null as the anchor node. An unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. In case, the position and attributesOverride arguments are ignored.

The isContextMenu argument should be true for context menus and false for all other types of popups. It affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.

openPopupAtScreen( x, y, isContextMenu ) New in Firefox 3

Return type: no return value

Open the popup at a specific screen position specified by x and y. This position may be adjusted if it would cause the popup to be off of the screen. The x and y coordinates are measured in CSS pixels.

showPopup( element, x, y, popupType, anchor, align ) Deprecated in Mozilla 1.9

Return type: no return value

Opens a popup element. There are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the window. If either x or y are set to values, the popup will appear at the screen coordinate (x,y). If x and y are -1, the popup will be positioned relative to the element specified as the first argument. This is what you might do to show a popup below a button, for example. In this latter case, the anchor and align arguments may be used to further control where the popup appears relative to the element. The anchor argument corresponds to the popupanchor attribute on the element. The align argument corresponds to the popupalign attribute on the element. The anchor and align arguments are ignored if either x or y are not -1.

To have a popup appear relative to another element yet still offset by some number of pixels, determine the actual screen position of the element using the boxObject.screenX and boxObject.screenY properties of the element, and use those as the x and y arguments offset by the desired values.

The popupType should be either the string popup, context, or tooltip. Each type of popup is intended to be displayed only temporarily; they are not expected to be displayed permanently. Only one popup may be displayed at a time.

sizeTo( width, height )

Return type: no return value

Changes the current size of the popup to the new width and height.

[edit] Related

TBD