Origami Frontend Components & Services

JSDoc: o-tooltip

new Tooltip(tooltipEl, opts)

Represents a tooltip.

parameter type default description
tooltipEl HTMLElement The tooltip element in the DOM (Required)
opts Object An options object for configuring the tooltip (Optional)

Methods

  • getOptions(tooltipEl) - (static) Get the data attributes from the tooltipEl. If the tooltip is being set up declaratively, this method is used to extract the data attributes from the DOM.
  • checkOptions(opts) - (static) Check the options passed in are valid, and that the required option (target) is present
  • render - (instance) Render the tooltip. Adds markup and attributes to this.tooltipEl in the DOM
  • show - (instance) Show the tooltip. Adds event handlers for clicks, touches, keypresses and viewport resizes. Uses FTDomDelegate to implement the event delegate pattern. Calls DrawTooltip.
  • toggle - (instance) Toggle the tooltip open and close
  • closeAfter(seconds) - (instance) Close the tooltip after set time
  • showAfter(seconds) - (instance) Show the tooltip after set time
  • destroy - (instance) Destroy the tooltip.
  • close - (instance) Close the tooltip. (Visually hide it and remove event listeners)
  • closeOnKeyUp(ev)
  • resizeListener - (instance) Respond to resize events. Redraw the tooltip in case the target has moved.
  • drawTooltip - (instance) Calculates the best place to position the tooltip based on space around the target and a preference set by the user.
  • width
  • height

Links

Tooltip.getOptions(tooltipEl)

Static Method

Get the data attributes from the tooltipEl. If the tooltip is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
tooltipEl HTMLElement The tooltip element in the DOM (Required)

Links

Tooltip.checkOptions(opts)

Static Method

Check the options passed in are valid, and that the required option (target) is present

parameter type default description
opts Object An Object with configuration options for the tooltip

Links

Tooltip#render

Instance Method

Render the tooltip. Adds markup and attributes to this.tooltipEl in the DOM

Links

Tooltip#show

Instance Method

Show the tooltip. Adds event handlers for clicks, touches, keypresses and viewport resizes. Uses FTDomDelegate to implement the event delegate pattern. Calls DrawTooltip.

Links

Tooltip#toggle

Instance Method

Toggle the tooltip open and close

Links

Tooltip#closeAfter(seconds)

Instance Method

Close the tooltip after set time

parameter type default description
seconds

Links

Tooltip#showAfter(seconds)

Instance Method

Show the tooltip after set time

parameter type default description
seconds

Links

Tooltip#destroy

Instance Method

Destroy the tooltip.

Links

Tooltip#close

Instance Method

Close the tooltip. (Visually hide it and remove event listeners)

Links

Tooltip#closeOnKeyUp(ev)

Instance Method

parameter type default description
ev Event calls close on the tooltip if the key is Esc

Links

Tooltip#resizeListener

Instance Method

Respond to resize events. Redraw the tooltip in case the target has moved.

Links

Tooltip#drawTooltip

Instance Method

Calculates the best place to position the tooltip based on space around the target and a preference set by the user.

Links

Tooltip#width

Instance Method

Links

Tooltip#height

Instance Method

Returns

  • Integer - : the offset height of the tooltip element

Links

new Tooltip(tooltipEl, opts)

Represents a tooltip.

parameter type default description
tooltipEl HTMLElement The tooltip element in the DOM (Required)
opts Object An options object for configuring the tooltip (Optional)

Methods

  • getOptions(tooltipEl) - (static) Get the data attributes from the tooltipEl. If the tooltip is being set up declaratively, this method is used to extract the data attributes from the DOM.
  • checkOptions(opts) - (static) Check the options passed in are valid, and that the required option (target) is present
  • render - (instance) Render the tooltip. Adds markup and attributes to this.tooltipEl in the DOM
  • show - (instance) Show the tooltip. Adds event handlers for clicks, touches, keypresses and viewport resizes. Uses FTDomDelegate to implement the event delegate pattern. Calls DrawTooltip.
  • toggle - (instance) Toggle the tooltip open and close
  • closeAfter(seconds) - (instance) Close the tooltip after set time
  • showAfter(seconds) - (instance) Show the tooltip after set time
  • destroy - (instance) Destroy the tooltip.
  • close - (instance) Close the tooltip. (Visually hide it and remove event listeners)
  • closeOnKeyUp(ev)
  • resizeListener - (instance) Respond to resize events. Redraw the tooltip in case the target has moved.
  • drawTooltip - (instance) Calculates the best place to position the tooltip based on space around the target and a preference set by the user.
  • width
  • height

Links

Switch component view

GitHub Repository

Install o-tooltip

If using the Build Service, add o-tooltip@^3.5.1 to your script and link tags.

If running a Manual Build, run bower install --save "o-tooltip@^3.5.1".

Help & Support

o-tooltip is maintained directly by the Origami team. If you have any questions about o-tooltip or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com