Tooltip

Use this extension to include tooltips on your Miva store.

Features

• 4 size options that can be set in tooltip.scss:
  • default (content dictates width)
  • small
  • medium
  • large
• 4 positions (one required):
  • top
  • right
  • bottom
  • left
• Mobile/touch devices utilize touch behavior to show tooltip
• Desktops utilize hover and keyboard navigation behavior to show tooltip

Installation

This class is pre-installed and loaded asynchronously with Genesis out of the box.

1. Add import Tooltip from 'extensions/tooltip'; to your JavaScript file.
2. Add @import "extensions/tooltip/index"; to your SCSS file.

Example Usage

.mvt

Use the following HTML structure:

<div class="js-tooltip g-tooltip" tabindex="0">
    <div class="g-tooltip__label">?</div>
    <div class="g-tooltip__dropdown g-tooltip__dropdown--top">
        <div role="tooltip" class="g-tooltip__content">
            Tooltip content goes here.
        </div>
    </div>
</div>

.js

Preferred asynchronous initialization:

(async () => {
    const tooltipElements = document.getElementsByClassName('js-tooltip');

    if (!tooltipElements.length) {
        return;
    }

    const {default: Tooltip} = await import('extensions/tooltip');

    for (const element of tooltipElements) {
        new Tooltip(element);
    }
})();

Alternatively:

import Tooltip from 'extensions/tooltip';

for (const element of document.getElementsByClassName('js-tooltip')) {
    new Tooltip(element);
}

Options

The Tooltip class can take an optional object as the second parameter to override any of the default configuration options.

The following table defines the available configuration options:

Name	Type	Description	Default Value
dropdownElement	HTMLElement String	The dropdown element.	'.g-tooltip__dropdown'
labelElement	HTMLElement String	The label element.	'.g-tooltip__label'
openClass	String	The tooltip open class.	'g-tooltip--open'

Tooltip Classes

• Size classes:
  • g-tooltip__content--small
  • g-tooltip__content--medium
  • g-tooltip__content--large
• Position classes:
  • g-tooltip__dropdown--top
  • g-tooltip__dropdown--right
  • g-tooltip__dropdown--bottom
  • g-tooltip__dropdown--left

Caveats

Any element can be used as the g-tooltip__label, though you will have to adjust the height, width, and border-width of g-tooltip as it's styled as a small circle by default. The positioning of the left and right tooltips will need to be adjusted as well in this scenario.