Tip

Classes

Tip

Methods

content(content) → {Tip|string}

Description:

• Although the content of the tooltip is set with the create method, you may use the content method on an Tip object to dynamically alter the content of the tooltip at runtime. The content argument can be any valid HTML (text, tables, images, svg, etc.).

Source:

• Tip.js, line 65

Example

fxTootip.content() method

let myTooltip = fxToolTip.create('myElement', 'Loreiem Ipsum');
.
.
.
myTooltip.content('Ut enim ad minim veniam');

Parameters:

Returns:

Type

Tip | string

orientation(orientation) → {Tip|string}

Description:

• You may set the location of the tooltip relative to the target element (or cursor if the mousePoint method is called with true as the argument). If the orientation is set, auto-positioning is disabled (see the autoPosition method).

Source:

• Tip.js, line 85

Example

Tip.orientation() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .orientation('left');

Parameters:

Returns:

Type

Tip | string

preferredOrientation(preferredOrientation) → {Tip|boolean}

Description:

• The preferredOrientation method is designed to work with auto-positioning. If there is sufficient space to display the tooltip at the preferred orientation, then regardless of which position is optimum, the tooltip will be displayed at the preferred orientation. If there is insufficient room to display the tooltip at the preferred orientation, then auto-positioning takes over and displays the tooltip at the optimum position.

Source:

• Tip.js, line 109

Example

Tip.preferredOrientation() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .preferredOrientation('left');

Parameters:

Returns:

Type

Tip | boolean

autoPosition(autoPosition) → {Tip|boolean}

Description:

• If set to true, the autoPosition method enables auto-positioning of the tooltip.
  Auto-positioning evaluates the available screen space on all four sides of the target element (or cursor if the mousePoint method is called with true as the argument) and the height and width of the tooltip and positions the tooltip at the orientation with the most room. If the preferred orientation is not set to 'none', and that location has sufficient room to display the tooltip, then the preferred location is used.

Source:

• Tip.js, line 134

Example

Tip.autoPosition() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .autoPosition(false);

Parameters:

Returns:

Type

Tip | boolean

autoSize(autoSize) → {Tip|boolean}

Description:

• If set to true, the autoSize method enables auto-sizing of the tooltip. Auto-sizing evaluates the content of the tooltip and attempts to scale the width and height of the tooltip to conform to the aspect ratio of the document viewport. Auto-sizing to the document viewport aspect ratio is intended to present an appealing appearance and maximize the probability that the tooltip will be displayable on the screen. If the content includes non-text elements like tables or images, it may be necessary to set the minimum width of the tooltip using the minWidth method or the minimum height using the minHeight method. Note: auto-sizing does not actually set the tooltip height. It sets the width, so that when the tooltip div element auto-scales the height for overflow, the desired aspect ratio is achieved. If autoSize is set to true, both the width and height options are set to 'auto'.

Source:

• Tip.js, line 164

Example

Tip.autoSize() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .autoSize(false);

Parameters:

Returns:

Type

Tip | boolean

mousePoint(mousePoint) → {Tip|boolean}

Description:

• If set to true, the mousePoint method causes the tooltip to be displayed relative to the cursor position instead of the target element. If set to false the tooltip will be displayed relative to the target element. In this case, the tooltip will attempt to center relative to one of the four sides of the target element (depending on the auto-position setting). If, due to document viewport limitations, the tooltip can't center itself, it will adjust the tooltip left, right, up, or down as appropriate, but offset the tooltip pointer to keep it centered on the element.

Source:

• Tip.js, line 191

Example

Tip.mousePoint() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .mousePoint(true);

Parameters:

Returns:

Type

Tip | boolean

trackMouse(mousePoint) → {Tip|boolean}

Description:

• If set to true, the trackMouse method causes the tooltip to follow the cursor as it moves over the target element. If auto-positioning is set to true, the tooltip will continue to adjust it orientation to ensure that it can be displayed within the document viewport. The tooltip will also continuously offset the tooltip pointer, as required, to keep it centered relative to the cursor. When true is passed to the trackMouse method, the mousePoint option to will automatically be set to true as well.

Source:

• Tip.js, line 213

Example

Tip.trackMouse() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .trackMouse(true);

Parameters:

Returns:

Type

Tip | boolean

cursor(cursor) → {Tip|string}

Description:

• The cursor method allows programmatic control of the cursor appearance as the mouse hovers over the target element. Note that not all defined cursor types are available in all browsers.

Source:

• Tip.js, line 236

Example

Tip.cursor() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .cursor('pointer');

Parameters:

Returns:

Type

Tip | string

font(family, size) → {Tip|Object}

Description:

• Setting the font family and size via the font method, sets the font-family and font-size options contained within the which is injected into the .fxToolTip style's ruleset upon hover over the target element. These options set defaults for text within the tooltip, but can be customized through inline or css selector styles, contained in the content that is passed to the create method.

Source:

• Tip.js, line 278

Example

Tip.font() method

<style>
     H1 {
         .font-size: 1.25em;
         .font-weight: bold;
     }
     .myClass {
         .font-style: italic;
     }
</style>
<body>
     <script type = 'text/javascript' src='fxToolTip.js'></script>
     
     <p id='myElement'>This is the target element</p>
     
     <script>
         let content = '<H1>Lorem ipsum</H1><p>Ut enim ad minim veniam, <span class='myClass'>quis nostrud</span> exercitation</p>';
         let myTooltip = fxToolTip.create('myElement', content)
             .font('verdana, sans-serf', '12px')
     </script>
</body>

Parameters:

Returns:

Type

Tip | Object

foregroundColor(foregroundColor) → {Tip|string}

Description:

• Setting the tooltip foregroundColor via the foregroundColor method, sets the foregroundColor option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The forgroundColor option sets defaults for text color within the tooltip, but can be customized through inline or CSS selector styles.

Source:

• Tip.js, line 302

Example

Tip.foregroundColor() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .foregroundColor('rgb(20, 40, 128)');

Parameters:

Returns:

Type

Tip | string

backgroundColor(backgroundColor) → {Tip|string}

Description:

• Setting the tooltip backgroundColor via the backgroundColor method, sets the backgroundColor option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The backgroundColor option sets the background color of the tooltip.

Source:

• Tip.js, line 322

Example

Tip.backgroundColor() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     backgroundColor('rgb(20, 40, 128)');

Parameters:

Returns:

Type

Tip | string

backgroundOpacity(backgroundOpacity) → {Tip|number}

Description:

• Setting the tooltip backgroundOpacity via the backgroundOpacity method, sets the backgroundOpacity option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The backgroundOpacity option sets the background opacity of the tooltip.

Source:

• Tip.js, line 342

Example

Tip.backgroundOpacity() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     backgroundOpacity(0.5);

Parameters:

Returns:

Type

Tip | number

padding(padding) → {Tip|string}

Description:

• Setting the tooltip padding via the padding method, sets the padding option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The padding option establishes the padding for the tooltip. If the padding argument contains only one measurement, uniform padding is applied to all sides of the tooltip. If the padding argument contains two measurements, the first measure is applied to the top and bottom, and the second to the left and right. If the padding argument contains three measurements, the first is applied to the top, the second to the left and right, and the third to the bottom. If the padding argument contains four measurements, they are applied to the top, left, bottom, right respectively.

Source:

• Tip.js, line 367

Example

Tip.padding() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .padding('2em 5px 1em 5px');

Parameters:

Returns:

Type

Tip | string

borderRadius(borderRadius) → {Tip|string}

Description:

• Setting the borderRadius via the borderRadius method, sets the borderRadius option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The borderRadius option sets a uniform borderRadius for the tooltip corners.

Source:

• Tip.js, line 428

Example

Tip.borderRadius() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .borderRadius('1em');

Parameters:

Returns:

Type

Tip | string

boxShadow(size, color, opacity) → {Tip|string}

Description:

• Setting the boxShadow size, color, and opacity via the boxShadow method, sets the boxShadow option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The boxShadow option sets a box shadow offsets to the lower right of the tooltip.

Source:

• Tip.js, line 454

To Do:

• check input parameters

Example

Tip.boxShadow() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .boxShadow('1em', '#0000FF', 0.5); 

Parameters:

Returns:

Type

Tip | string

transitionVisible(delay, duration) → {Tip|string}

Description:

• Setting the transitionVisible delay and duration via the transitionVisible method, sets the transitionVisible option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The transitionVisible option sets the transition effect upon hover over the target element.

Source:

• Tip.js, line 497

Example

Tip.transitionVisible() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .transitionVisible(0, 0.6);

Parameters:

Returns:

Type

Tip | string

transitionHidden(delay, duration) → {Tip|string}

Description:

• Setting the transitionHidden delay and duration via the transitionHidden method, sets the transitionHidden option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon target element mouseout. The transitionHidden option sets the transition effect upon target element mouseout.

Source:

• Tip.js, line 521

Example

Tip.transitionHidden() method

fxToolTip.create('myElement', 'Loreiem Ipsum';
     .transitionHidden(0, 0.2);

Parameters:

Returns:

Type

Tip | string

arrowSize(arrowSize) → {Tip|string}

Description:

• Setting the arrowSize via the arrowSize method, sets the arrowSize option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The arrowSize option sets the size of the tooltip's arrow.

Source:

• Tip.js, line 542

Example

Tip.arrowSize() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .arrowSize('1.2em');

Parameters:

Returns:

Type

Tip | string

width(width) → {Tip|string}

Description:

• Setting the width via the width method, sets the width option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. When the width option is set to any value other than auto, auto-sizing is disabled. However, if the autoSize method is subsequently set to true, the width setting will be ignored. If the width is an absolute value (e.g., '200px' | '30em'), it will remain constant if the screen size changes. In this case, it may be more appropriate to use a realtive measure such as percentage

Source:

• Tip.js, line 567

Example

Tip.width() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .width('500px');

Parameters:

Returns:

Type

Tip | string

maxWidth(maxWidth) → {Tip|string}

Description:

• Setting the maximum width via the maxWidth method, sets the maxWidth option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The maxWidth option sets the maximum width of the tooltip upon hover over the target element. The maxWidth method is useful to ensure that tooltips don't grow too large when using auto-sizing or when their content is very large and may overflow smaller screens.

Source:

• Tip.js, line 592

Example

Tip.maxWidth() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .maxWidth('100px');

Parameters:

Returns:

Type

Tip | string

minWidth(minWidth) → {Tip|string}

Description:

• Setting the minimum width via the minWidth method, sets the minWidth option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The minWidth option sets the minimum width of the tooltip upon hover over the target element. The minWidth method is useful to ensure that non-text content elements such as tables are correctly displayed in the tooltip when using auto-sizing.

Source:

• Tip.js, line 615

Example

Tip.minWidth() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .minWidth('100px');

Parameters:

Returns:

Type

Tip | string

height(height) → {Tip|string}

Description:

• Setting the height via the height method, sets the height option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. When the height option is set to any value other than auto, auto-sizing is disabled. However, if the autoSize method is subsequently set to true, the height setting will be ignored.

Source:

• Tip.js, line 638

Example

Tip.height() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .height('500px');

Parameters:

Returns:

Type

Tip | string

maxHeight(maxHeight) → {Tip|string}

Description:

• Setting the maximum height via the maxHeight method, sets the maxHeight option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The maxHeight method is useful to ensure that tooltips don't grow too large when using auto-sizing or when their content is very large and may overflow smaller screens.

Source:

• Tip.js, line 662

Example

Tip.maxHeight() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .maxHeight('500px');

Parameters:

Returns:

Type

Tip | string

minHeight(minHeight) → {Tip|string}

Description:

• Setting the minimum height via the minHeight method, sets the minHeight option contained within the Tip object which is injected into the .fxToolTip style's ruleset upon hover over the target element. The minHeight method is useful to ensure that non-text content elements such as tables are correctly displayed in the tooltip when using auto-sizing.

Source:

• Tip.js, line 685

Example

Tip.minHeight() method

fxToolTip.create('myElement', 'Loreiem Ipsum')
     .minHeight('100px');

Parameters:

Returns:

Type

Tip | string

remove()

Description:

• Similar to the global remove method, the remove method of a Tip object removes all of the event listeners and the associated Tip object object from the stack. If this is the only Tip object on the stack, the remove method will remove all of the .fxTooltip CSS rules from the stylesheet and set the library back to its un-instantiated state. Generally, this method is not required, since fxToolTip automatically detects the removal of target elements, and performs corresponding tooltip removal automatically.

Source:

• Tip.js, line 709

Example

Tip.remove() method

let myToolTip = fxToolTip.create('myElement', 'Loreiem Ipsum');
.
.
.
myToolTip.remove();