Foundation - Tooltip JavaScript Reference

Description

Foundation provides JavaScript components for the tooltip as listed below.

Initializing

To use this plugin, the foundation.core.js, foundation.tooltip.js files should be included in your JavaScript. This plugin requires the following utility libraries −

  • foundation.util.box.js

  • foundation.util.triggers.js

Foundation.Tooltip

It creates a new tooltip's instance.

var elem = new Foundation.Tooltip(element);

It triggers the Tooltip#event:init events and accepts the following parameters.

Sr.No. Name & Description Type
1

element

It is the jQuery object used to attach a tooltip to.

 jQuery
2

options

To extend the default configuration this object is used.

 Object

Plugin Options

You can use these to customize a tooltip's instance. It can be set as separate data attributes, one merged data-options attribute or as an object passed to the constructor of the plugin. The following table lists the plugin options used in Foundation.

Sr.No. Name & Description Example
1

hoverDelay

It represents time in ms, to be taken before a tooltip must open on hover.

 200
2

fadeInDuration150

It represents the time to fade into view.

 150
3

fadeOutDuration

It represents the time to fade out of view.

 150
4

disableHover

It disables the hover events from opening the tooltip when set to true.

 false
5

templateClasses

Additional classes to apply to the tooltip template, which is optional.

 'my-cool-tip-class'
6

tooltipClass

Non-optional class added to templates of the tooltip.

 'tooltip'
7

triggerClass

Class applied to the anchor element of the tooltip.

 'has-tip'
8

showOn

Minimum size of the breakpoint at which to open the tooltip.

 'small'
9

template

Custom template to be used to create tooltip markup.

 ''
10

tipText

Text outputted in tooltip template on opening.

 'Some cool space fact here.'
11

clickOpen

It opens the tooltip when fired with a click or touch event.

 true
12

positionClass

Additional classes for positioning, set by JS.

 'top'
13

vOffset

It represents the distance (pixels) in which the template must push from the anchor on Y axis.

 10
14

hOffset

It represents the distance (pixels) in which the template must push from the anchor on X axis, when aligned to aside.

 12

Events

These events will be triggered from any element with the plugin of the tooltips attached. The following table lists the events with a brief description.

Sr.No. Name & Description
1

tooltip.zf.tooltips

Triggers to close all other tooltips that are opened on the page.
2

show.zf.tooltips

Triggers when tooltip is displayed.
3

hide.zf.tooltips

Triggers when tooltip is hidden.

Functions

.show

It reveals the tooltip and triggers an event to close other tooltip. It triggers the Closeme#event:tooltip Tooltip#event:show events.

.hide

It hides the present tooltip and resets the positioning class when it changes because of the collision. It triggers the Tooltip#event:hide events.

.toggle

In addition to the static show() and hide() functions, .toggle adds a toggle method.

.destroy

It destroys a tooltip instance and the template element is removed from the view.

foundation_media.htm
Advertisements