Skip to main content

Tooltip

Hover or focus A Tooltip
<span class="env-tooltip">
   <a class="env-link" href="javascript:void(0)">Hover or focus</a>
   <span role="tooltip">A Tooltip</span>
</span>

Initialization

All elements with classname env-tooltip and one child element with role="tooltip" will be automatically initialized on DOMContentLoaded.

Elements with other classnames and elements added to the DOM after document was loaded must be initialized from script. A child element with role="tooltip" is required.

// Initialize elements added after DOMContentLoaded
envision.tooltip();

Note: HTML is not allowed inside the tooltip. For advanced content, please use Popover Tooltip.

Configuration

Use data-attributes or option parameters in JavaScript for settings.

See available options below.

Example using data-attributes

Minimum of 8 characters
<div class="example-input-fields">
   <div class="env-form-field">
      <label for="password-example" class="env-form-label">
         Password - show tooltip after one second
      </label>
      <div class="env-tooltip" data-placement="bottom-start" data-delay="1000">
         <input
            type="password"
            class="env-form-input"
            aria-describedby="password-example-tooltip"
            id="password-example"
         />
         <span role="tooltip" id="password-example-tooltip">
            Minimum of 8 characters
         </span>
      </div>
   </div>
</div>

Example using JavaScript

Description of the button
<span class="example-custom-init-tooltip">
   <button class="env-button">Show tooltip to the right</button>
   <span role="tooltip">Description of the button</span>
</span>

Initialization of JavaScript example

const tooltipEl = document.querySelectorAll('.example-custom-init-tooltip');
if (tooltipEl) {
   envision.tooltip(tooltipEl, {
      placement: 'right',
      delay: 300,
   });
}

Options

envision.tooltip takes two parameters:

envision.tooltip(element, options);

  • element - You may pass any selector as a string, a DOM node or node list. Leave empty to initialize all new elements with class env-tooltip.

  • options - { placement, delay }

    • placement string

      • Prefered initial placement.
      • Default value: top
      • Possible values: top, right, bottom, left, auto,
      • Possible value modifiers: {value}-start, {value}-end

    • delay number

      • Milliseconds for delaying the popover opening and closing.
      • Default value: 200

Envision documentation