constructor(options?: any): Tooltip
Initializes a new instance of the Tooltip class.
JavaScript object containing initialization data for the Tooltip.
Gets or sets a CSS class name to add to the tooltip.
The default value for this property is an empty string.
Gets or sets the distance between the tooltip and the target element.
The default value for the property is **6** pixels.
Gets or sets the delay, in milliseconds, before hiding the tooltip if the mouse remains over the element.
The default value for the property is **zero** milliseconds, which causes the tip to remain visible until the mouse moves away from the element.
Gets or sets a value that determines whether tooltips should use a fade-in animation when shown.
The default value for this property is **false**.
Gets or sets a value that determines whether the tooltip contents should be displayed as plain text or as HTML.
The default value for the property is **true**.
Gets or sets the PopupPosition where the tooltip should be displayed with respect to the owner element.
The default value for this property is **PopupPosition.Above**.
Gets or sets a value that determines whether the tooltip should be calculated based on the mouse position rather than the target element.
The default value for the property is **false**, which means the tooltip position is calculated based on the target element.
The position property is used to determine the tooltip position in respect to the target element or to the mouse position.
Gets or sets the delay, in milliseconds, before showing the tooltip after the mouse enters the target element.
The default value for the property is **500** milliseconds.
Gets or sets the TooltipTrigger that determines how the tooltip should be triggered.
The default value for this property is **TooltipTrigger.Focus**.
getTooltip(element: any): string
Gets the tooltip content associated with a given element.
Element, element ID, or control that the tooltip explains.
onPopup(e: TooltipEventArgs): boolean
Raises the popup event.
TooltipEventArgs that contains the event data.
setTooltip(element: any, content: string | null, position?: PopupPosition): void
Assigns tooltip content to a given element on the page.
The same tooltip may be used to display information for any number of elements on the page. To remove the tooltip from an element, call setTooltip and specify null for the content.
To remove the tooltips for all elements, call the dispose method.
Element, single element CSS selector, or control that the tooltip explains.
Tooltip content or ID of the element that contains the tooltip content.
Position where the tooltip should be displayed with respect to the owner element.
show(element: any, content: string, bounds?: Rect, position?: PopupPosition): void
Shows a tooltip with the specified content next to the specified element.
Element, element ID, or control that the tooltip explains.
Tooltip content or ID of the element that contains the tooltip content.
Optional parameter that defines the bounds of the area that the tooltip targets. If not provided, the element bounds are used.
Optional parameter that specifies the position of the tooltip with respect to the reference bounds. If provided, this value overrides the setting of the position property.
Occurs before the tooltip content is displayed.
The event handler may customize the tooltip content or suppress the tooltip display by changing the event parameters.
Provides a pop-up window that displays additional information about elements on the page.
The Tooltip class can be used in two modes:
**Automatic Mode:** Use the setTooltip method to connect the Tooltip to one or more elements on the page. The Tooltip will automatically monitor events and display the tooltips when the user performs actions that trigger the tooltip. For example:
import { Tooltip } from '@mescius/wijmo'; let tt = new Tooltip(); tt.setTooltip('#menu', 'Select commands.'); tt.setTooltip('#tree', 'Explore the hierarchy.'); tt.setTooltip('#chart', '#idChartTooltip');**Manual Mode:** The caller is responsible for showing and hiding the tooltip using the show and hide methods. For example:
import { Tooltip } from '@mescius/wijmo'; let tt = new Tooltip(); element.addEventListener('click', () => { if (tt.isVisible) { tt.hide(); } else { tt.show(element, 'This is an important element!'); } });The example below shows how you can use the Tooltip class to add Excel-style notes to cells in a FlexGrid control:
{@sample Grid/CustomCells/CellNotes/purejs Example}