API / geotoolkit / controls / tools / ToolTipTool / ToolTipTool
tools.ToolTipTool.ToolTipTool
Provides HTML based tooltip tool to display content information
↳
ToolTipTool
Constructors
Methods
Css Properties
| Name | Type | Description |
|---|---|---|
alignment | AnchorType | Tooltip alignment according to the point set by offsets |
autoflip | boolean | True to automatically flip tooltip alignment if it doesn't fit the window |
autoupdate | boolean | True if tooltip info should be auto updated after layer.invalidate() was called |
cssclasses | string | CSS classes' names to be applied for tooltip 'cg-tooltip' by default |
delay | number | |
delay | number | |
enabled | boolean | Enabled state |
fadeduration | number | Delay during show/hiding tooltip, 0 means false and tooltip shows or hide instantly |
hidedelay | number | Auto hide in millisecond, 0 means false and autohide is disabled |
hidedelay | number | Tooltip auto-hide delay, 0 means false and auto hide is disabled |
layer | CompositeNode | Manipulator layer |
layer-clipping | boolean | Enable clipping, this does not consider the clipstyle, it is related to bounds-clipping |
layer-clipstyle | ClipStyle | Clipping style |
layer-clipstyle-evenodd | boolean | True if evenodd mode is on ('nonzero' mode otherwise) |
layer-clipstyle-geometry | GraphicsPath | Clipping geometry |
layer-clipstyle-geometry-bounds | Rect | Bounds |
layer-clipstyle-geometry-bounds-height | number | Height |
layer-clipstyle-geometry-bounds-readonly | boolean | Readonly |
layer-clipstyle-geometry-bounds-width | number | Width |
layer-clipstyle-geometry-bounds-x | number | Left |
layer-clipstyle-geometry-bounds-y | number | Top |
layer-clipstyle | GraphicsPath | Clipping style |
layer-cssclass | string | The css class name of this node |
layer-csscursor | string | CSS cursor associated with node |
layer-cssstyle | string | CSS style to be applied to inserted elements |
layer-id | string | number | Id of the node, its a unique identifier |
layer-infinity | boolean | Mode to render outside the model limits |
layer-localtransform | Transformation | Local transformation |
layer-localtransform-dx | number | X axis translation |
layer-localtransform-dy | number | Y axis translation |
layer-localtransform-xx | number | X scale |
layer-localtransform-xy | number | Xy skew |
layer-localtransform-yx | number | Yx skew |
layer-localtransform-yy | number | Y scale |
layer-margins | number | string | It has properties for specifying the margins for each side |
layer-name | string | Name of the node. It is often used for debugging purposes or to simplify queries |
layer-opacity | number | Node opacity (from 0 to 1). If it is undefined or null it inherits property from the parent. It changes globalAlpha on the rendering context |
layer-opacityblendmode | BlendMode | Node opacity mode to blend it |
layer-scalescrollstrategy | ScaleScrollStrategy | Scale scroll strategy |
layer-scalescrollstrategy-enabled | boolean | Enable flag |
layer-selectable | boolean | Selectable node, a boolean to determine if selection should consider this node |
layer-tag | any | Custom information associated with node. It is a user object which can be used by client code to store information or attach an application object to the shape |
layer-transform | string | Additional CSS transformation applied to node or 'none' |
layer-transform | Transformation | Additional CSS transformation applied to node or 'none' |
layer-visible | boolean | Visibility of the node, a boolean to determine if the node should be rendered or not |
layer-z-index | number | Define node z-index |
mode | PointerMode | Tooltip appearance mode |
mouseradius | number | Device radius for mouse events |
name | string | Name of the tool used like cross-hair etc |
offsetx | number | Offset of tooltip from current position by x in pixels |
offsety | number | Offset of tooltip from current position by y in pixels |
orientation | Orientation | Tooltip orientation |
radius | number | Radius of selection |
showdelay | number | Delay between displaying tooltip, 0 means false and tooltip shows immediately |
showdelay | number | Delay between displaying tooltip, 0 means false and tooltip shows immediately |
size | Range | Client size range |
size-high | number | Upper range boundary |
size-low | number | Lower range boundary |
size-max | number | |
size-min | number | |
touchradius | number | Device radius for touch events |
transparent | boolean | Mouse transparent mode |
Constructors
• new ToolTipTool(options?)
ToolTipTool constructor
| Name | Type | Description |
|---|---|---|
Optional options | Options | tool options |
AbstractTool.constructor
Methods
▸ addListener(eventName, listener): ToolTipTool
add event listener. The listener receives the message when the system event happens.
Deprecated
since 4.0 use .on() instead. Note that 3 args callback should be used in subscription via .on(): (eventType, source, args)
| Name | Type | Description |
|---|---|---|
eventName | string | event name or unique event identifier |
listener | Function | the event listener |
▸ captureMouseUp(): void
listen to window mouse events in order to catch a mouse up action outside of the tool container DOM element. useful for example when you pan and release click outside of DOM element.
void
▸ dispose(): void
Dispose ToolTipTool
void
▸ fireEvent(eventName, eventArgs?): void
This method is Protected. Fire an Event.
Deprecated
since 4.0 use .notify() instead. Note that 3 args callback should be used in subscription via .on()
| Name | Type | Description |
|---|---|---|
eventName | string | event name |
Optional eventArgs | any | contains info of the event |
void
▸ getAlignment(): AnchorType
▸ getAnchorCssClasses(): Partial<Record<AnchorCssKeys, string>>
Return CSS class map for tooltip anchors
Partial<Record<AnchorCssKeys, string>>
CSS classes
▸ getCallback(): Callback
Gets callback
callback callback to return information about the current position
▸ getClassName(): string
string
▸ getCssClasses(): string
Return CSS classes for tooltip
string
CSS classes
▸ getDivElement(): HTMLElement | CreateHTMLElement
Gets tooltip div element or callback for creates div element
HTMLElement | CreateHTMLElement
divElement HTML div container element or callback which creating div
▸ Protected getEventRadius(eventArgs): number
Returns device radius for the provided event
| Name | Type | Description |
|---|---|---|
eventArgs | EventArgs | contains info of the event |
number
▸ getManipulatorLayer(): CompositeNode<Node>
return manipulator layer
layer
AbstractTool.getManipulatorLayer
▸ getMouseRadius(): number
Returns current device radius for mouse events
number
▸ getName(): string
return tool name if any
string
name of the tool
▸ getOffsetX(): number
number
▸ getOffsetY(): number
number
▸ getOrientation(): Orientation
▸ getParentTool(): AbstractCompositeTool
Gets parent tool
parent tool
▸ getPointerMode(): string
string
▸ getProperties(context?): OptionsOut
Gets all the properties pertaining to this object
| Name | Type |
|---|---|
Optional context | ISerializationContext |
properties object
▸ getProperty(name): any
Gets dynamic property by name. These properties can be used as a property bags
| Name | Type | Description |
|---|---|---|
name | string | property name |
any
▸ getPropertyKeys(): string[]
Returns known properties keys
string[]
▸ getRadius(): number
Returns radius of selection
number
radius of selection
▸ getRegistry(): ToolTipRegistry
Gets tooltip registry instance
tooltip registry
▸ getRoot(): AbstractCompositeTool
Gets root tool
parent tool
▸ getTooltipPositionHandler(): PositionCallback
Gets tooltip position handler, this handler will be called every time mouse position changed
PositionCallback
▸ getTooltipSizeHandler(): SizeCallback
Gets tooltip size handler, this handler will be called every time mouse position changed
SizeCallback
▸ getTouchRadius(): number
Returns current device radius for touch events
number
▸ hasEventListener(type, callback?): boolean
Check if a list of event listeners for this type contains this listener
| Name | Type | Description |
|---|---|---|
type | string | type of event or property |
Optional callback | Function | to be called, if null, check if any callback is registered |
boolean
▸ hide(): void
hide tooltips if any
void
▸ isActive(): boolean
return active state
boolean
▸ isDisposed(): boolean
Returns whether this object has been disposed
boolean
▸ Protected isDoubleClick(point, eventArgs?): boolean
returns true if double clicked
| Name | Type | Description |
|---|---|---|
point | Point | Click point |
Optional eventArgs | EventArgs | optional event args to verify double click |
boolean
▸ isEnabled(): boolean
returns enable state
boolean
state
▸ isSilent(): boolean
Return true if the event dispatcher doesn't notify any events
boolean
▸ isTouchEvent(eventArgs): boolean
return true if the event is a touch event and false otherwise.
| Name | Type | Description |
|---|---|---|
eventArgs | Event | EventArgs | contains info of the event |
boolean
▸ notify<E>(type, source, args?): ToolTipTool
Notify listeners
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | event types |
source | AbstractTool | of the event |
Optional args | EventMap[E] | arguments of the event |
this
▸ off<E>(type?, callback?): ToolTipTool
Detach listener on event. Calling .off() with no arguments removes all attached listeners. Calling .off(type) with no callback removes all attached listeners for specific type.
| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
Optional type | E | type of the event |
Optional callback | (eventType: E, sender: ToolTipTool, args: EventMap[E]) => void | function to be called |
this
▸ on<E>(type, callback): ToolTipTool
Attach listener on event that will be called whenever the specified event is delivered to the target
If the callback function is already in the list of event listeners for this target, the function is not added a second time.
If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an "on" call, the second function will also be added to the list of event listeners for that target.
TypeScript hint: in case of creating derived tool with own events, EventMap should be extended and .on() and .notify() methods redeclared, see sample.Example
// Using in derived tool
import type {EventMap as EventMapBase} from '@int/geotoolkit/controls/tools/AbstractTool';
export type EventMap = EventMapBase & {
[MyToolEvents.onValueChanged]: MyToolEventArgs
}
export enum MyToolEvents {
onValueChanged = 'onValueChanged'
}
export class MyTool extends AbstractTool {
public declare on: <E extends keyof EventMap>(type: E, callback: (eventType: E, sender: this, args: EventMap[E]) => void) => this;
protected declare notify: <E extends keyof EventMap>(type: E, source: AbstractTool, args?: EventMap[E]) => this;
public declare off: <E extends keyof EventMap>(type: E, callback?: (eventType: E, sender: this, args: EventMap[E]) => void) => this;
// ...
}| Name | Type |
|---|---|
E | extends string |
| Name | Type | Description |
|---|---|---|
type | E | type of event or property |
callback | (eventType: E, sender: ToolTipTool, args: EventMap[E]) => void | to be called |
▸ Protected onActiveStateChanged(): void
Fires
void
AbstractTool.onActiveStateChanged
▸ Protected onEnabledStateChanged(): void
Fires
void
AbstractTool.onEnabledStateChanged
▸ pageToCanvas(eventArgs, externalPlot?): Object
return position relative to the canvas
| Name | Type | Description |
|---|---|---|
eventArgs | Event | EventArgs | parentElement the parent HTML element |
Optional externalPlot | Plot | plot |
Object
| Name | Type |
|---|---|
x | number |
y | number |
▸ pointToModel(model, eventArgs): Point
converts device coordinates to inner coordinates of node
| Name | Type | Description |
|---|---|---|
model | Node | the model |
eventArgs | Point | EventArgs | arguments of the event OR point in device (plot) coordinates. |
▸ removeListener(eventName, listener?): ToolTipTool
remove event listener. The listener reveives the message when the system event happens.
Deprecated
since 4.0 use .off() instead.
| Name | Type | Description |
|---|---|---|
eventName | string | event name |
Optional listener | Function | Function[] | the event listener, if null, remove all listeners for the event |
▸ setActive(active): ToolTipTool
set active state
Fires
| Name | Type | Description |
|---|---|---|
active | boolean | set active state |
▸ setAlignment(alignment): ToolTipTool
| Name | Type |
|---|---|
alignment | AnchorType |
▸ setAnchorCssClasses(cssAnchorClasses): ToolTipTool
Sets CSS class map for tooltip anchors (to render arrows). By default this map contains css-classnames for the following anchors: 'topcenter': 'cg-tooltip-arrow-top', 'bottomcenter': 'cg-tooltip-arrow-bottom', 'leftcenter': 'cg-tooltip-arrow-left', 'rightcenter': 'cg-tooltip-arrow-right' You can set it to null is to remove default css classes and use rectangular tooltip instead of callout.
| Name | Type | Description |
|---|---|---|
cssAnchorClasses | Partial<Record<AnchorCssKeys, string>> | CSS classes |
this
▸ setCallback(callback): ToolTipTool
Set callback to return information about the current position
| Name | Type | Description |
|---|---|---|
callback | Callback | callback |
▸ setCssClasses(cssClasses): ToolTipTool
Sets CSS classes to be applied for tooltip
| Name | Type | Description |
|---|---|---|
cssClasses | string | CSS classes |
this
▸ setDivElement(divElement): ToolTipTool
Sets tooltip div element or callback for creates div element
| Name | Type | Description |
|---|---|---|
divElement | HTMLElement | CreateHTMLElement | HTML div container element or callback which creating div |
this
▸ setEnabled(enabled): ToolTipTool
set enable state
Fires
Fires
| Name | Type | Description |
|---|---|---|
enabled | boolean | sets the enabled state |
this
▸ setMouseRadius(radius): ToolTipTool
Sets device radius for mouse events
| Name | Type | Description |
|---|---|---|
radius | number | radius for mouse events |
this
▸ setName(name): ToolTipTool
set tool name
| Name | Type | Description |
|---|---|---|
name | string | the tool name |
▸ setOffsetX(offsetX): ToolTipTool
Sets tooltip offset x
| Name | Type | Description |
|---|---|---|
offsetX | number | offset x |
this
▸ setOffsetY(offsetY): ToolTipTool
Sets tooltip offset y
| Name | Type | Description |
|---|---|---|
offsetY | number | offset y |
this
▸ setOptions(options?): ToolTipTool
Sets tooltip options
| Name | Type | Description |
|---|---|---|
Optional options | Options | options |
this
▸ setOrientation(orientation): ToolTipTool
| Name | Type |
|---|---|
orientation | Orientation |
▸ setPointerMode(mode): ToolTipTool
| Name | Type |
|---|---|
mode | string |
▸ setProperties(properties?, context?): ToolTipTool
Sets all the properties pertaining to this object
| Name | Type | Description |
|---|---|---|
Optional properties | Options | An object containing the properties to set |
Optional context | IDeserializationContext | deserialization context |
this
▸ setProperty(name, value): ToolTipTool
Sets dynamic property by name
| Name | Type | Description |
|---|---|---|
name | string | property name |
value | any | property value |
this
▸ setRadius(radius): ToolTipTool
Set radius of selection
| Name | Type | Description |
|---|---|---|
radius | number | radius of selection |
this
▸ setRegistry(registry): ToolTipTool
Set tooltip registry instance
| Name | Type |
|---|---|
registry | ToolTipRegistry |
▸ setSilent(bool): ToolTipTool
Set silent mode
| Name | Type | Description |
|---|---|---|
bool | boolean | flag to enable silent mode |
this
▸ setSlotEnabled(eventName, value, target?): ToolTipTool
Sets slot enabled
| Name | Type | Description |
|---|---|---|
eventName | string | eventName |
value | boolean | value |
Optional target | EventTarget | target |
▸ setSlots(slots?, merge?): ToolTipTool
Sets new slots.
Example
const slots = {
'pointerdown': (event: EventArgs) => {
// event is an instance of @int/geotoolkit/controls/tools/EventArgs
...
}
};
tool.setSlots(slots);| Name | Type | Description |
|---|---|---|
Optional slots | Record<string, Slot | Slot[] | (eventArgs: EventArgs) => void> | type of system events |
Optional merge | boolean | set to true if you want to merge with existing slots |
this
▸ setTooltipPositionHandler(handler?): ToolTipTool
Set tooltip position handler, this handler will be called every time mouse position changed
| Name | Type | Description |
|---|---|---|
Optional handler | PositionCallback | Handler to be called |
this
▸ setTooltipSizeHandler(handler?): ToolTipTool
Set tooltip size handler, this handler will be called every time mouse position changed
| Name | Type | Description |
|---|---|---|
Optional handler | SizeCallback | Handler to be called |
this
▸ setTouchRadius(radius): ToolTipTool
Sets device radius for touch events
| Name | Type | Description |
|---|---|---|
radius | number | radius for touch events |
this
▸ show(point, options?): ToolTipTool
Show tooltip at specified point (in node model coordinates, in case if node is specified)
| Name | Type | Description |
|---|---|---|
point | Point | plot point or node model point in case if node is specified |
Optional options | Object | tooltip options |
Optional options.fadeduration | number | |
Optional options.hidedelay | number | |
Optional options.node | Node | node tooltip owner |
Optional options.plot | Plot | plot tooltip owner |
Optional options.showdelay | number |
▸ Protected start(eventArgs?): ToolTipTool
start
| Name | Type | Description |
|---|---|---|
Optional eventArgs | EventArgs | event args |
▸ Protected stop(): ToolTipTool
stop
▸ toggle(): ToolTipTool
switch enable state to opposite state
▸ updateInfo(): ToolTipTool
Updates tooltip information using previous tooltip point
this
▸ Static canvasToClient(plotPoint, plot): Point
Convert plot coordinates to global coordinates
▸ Static clientToCanvas(nativeEvent, plot): Point
Convert global coordinates to plot coordinates
| Name | Type | Description |
|---|---|---|
nativeEvent | Event | native browser event |
plot | Plot | plot with canvas |
▸ Static getClassName(): string
string
▸ Static getExclusiveTool(plot): AbstractTool
return exclusive tool associated with plot
| Name | Type | Description |
|---|---|---|
plot | Plot | plot |
tool
▸ Static getNativeEventName(eventName): string[]
Returns native event name
| Name | Type | Description |
|---|---|---|
eventName | string | W3C Pointer Events Recommendation name |
string[]
AbstractTool.getNativeEventName
▸ Static isTouchEvent(eventArgs): eventArgs is TouchEvent
return true if the event is a touch event and false otherwise.
| Name | Type | Description |
|---|---|---|
eventArgs | Event | EventArgs | contains info of the event |
eventArgs is TouchEvent
▸ Static lock(plot, tool): void
Set exclusive tool for plot
| Name | Type | Description |
|---|---|---|
plot | Plot | plot |
tool | AbstractTool | tool |
void
▸ Static setDefaultMouseRadius(radius): void
Sets default device radius for mouse events
| Name | Type | Description |
|---|---|---|
radius | number | radius for mouse events |
void
AbstractTool.setDefaultMouseRadius
▸ Static setDefaultTouchRadius(radius): void
Sets default device radius for touch events
| Name | Type | Description |
|---|---|---|
radius | number | radius for touch events |
void
AbstractTool.setDefaultTouchRadius
▸ Static unlock(value): void
Remove exclusive tool from plot
| Name | Type | Description |
|---|---|---|
value | AbstractTool | Plot | value |
void