The options module provides the globalOptions object which serves as the template for all Tip object options. The globalOptions object may be directly changed so as to become the new defaults for all subsequently created tooltips through the globalOptions object which is exposed by the default object, which is exported in index.js. It also provided the applyOptions function which sets the fxTooltip div's styles.
- Source:
Methods
(inner) applyOptions(target)
- Source:
This function is called when a DOM HTML element is hovered over, but before the tooltip becomes visible. It sets the CSS styles of the fxTooltip div element in accordance with the options setting stored in its Tip class object.
Parameters:
Name | Type | Description |
---|---|---|
target |
Tip | The Tip class object being visualized. |
(inner) resetOptions(target)
- Source:
- Since:
- v2.2.0
Resets the fxTooTip styles to their initial state. Called on mouseout.
Parameters:
Name | Type | Description |
---|---|---|
target |
Tip | The Tip class object being visualized. |
Type Definitions
globalOptions
- Source:
Properties:
Name | Type | Description |
---|---|---|
content |
string | Contains the HTML text to be displayed when the tooltip is shown. Default - ''. |
orientation |
string | The side of the target HTML element where the tooltip is positioned. Default: 'right'. |
preferredOrientation |
string | The preferred side of the target HTML element where the tooltip is positioned. Default: 'right'. |
autoPosition |
boolean | Whether or not the tooltip should be optimally positioned relative to its owning HTML element. Default: true. |
autoSize |
boolean | Whether or not the tooltip should be optimally sized relative to its content. Default: true. |
mousePoint |
boolean | Whether the tooltip arrow should track relative to the mouse cursor. Default: false. |
trackMouse |
boolean | Whether the tooltip should track relative to the muse cursor. Default: false. |
cursor |
string | Which CSS cursor should be displayed when the mouse is over a tooltip's owing HTML element. Default: help'. |
fontFamily |
string | The font family for text inside the tooltip. Default: 'verdana, sans-serif'. |
fontSize |
string | The font size for text inside the tooltip. Default: '16px'. |
foregroundColor |
string | The color for foreground elements (e.g., text) inside the tooltip. Default: 'white'. |
backgroundColor |
string | The background color of the tooltip. Default: '#333333'. |
backgroundOpacity |
number | The opacity of the tooltip. Default: 1. |
padding |
string | The tooltip padding around its content. Default: '5px 10px'. |
borderRadius |
string | The rounding of the tooltip's corners. Default: '12px'. |
boxShadow |
string | The box shadow to the lower left of the tooltip. Default: '8px 8px 8px 0 rgba(0,0,0, 0.5)'. |
transitionVisible |
string | The delay and duration of the tooltip becoming visible when the mouse hovers over its owing HTML element. Default: 'opacity 0.4s ease-in 0s'. |
transitionHidden |
string | The delay and duration of the tooltip becoming invisible when the mouse hovers over its owing HTML element. Default: 'opacity 0.4s ease-out 0s'. |
arrowSize |
string | The size of the tooltip's arrow. Default: '12px'. |
width |
string | The width of the tooltip. Default: 'auto'. |
maxWidth |
string | The maximum width of the tooltip. Default: 'none'. |
minWidth |
string | The minimum width of the tooltip. Default: 'auto'. |
height |
string | The height of the tooltip. Default: 'auto'. |
maxHeight |
string | The maximum height of the tooltip. Default: 'none'. |
minHeight |
string | The minimum height of the tooltip. Default: 'auto'. |
The globalOptions object contains all of the option settings for each tooltip. A globalOptions object is stored within each Tip object and its members may be modified by methods exposed by the Tip object.
Type:
- Object