Kistenkoning components for Magento 2

Tooltip: Text 

<div class="position-relative top-50">
    <div class="tooltip tooltip--text">
        <button class="button button--icon button--fluid tooltip__trigger-button" type="button">

            <span class="button__text ">
                Why we recommend
            </span>

        </button>

        <div class="tooltip__content-wrapper" aria-hidden="true" tabindex="-1">
            <button class="button button--icon button--rotate-icon tooltip__close-button" type="button" aria-label="Close tooltip">
                <svg class="icon " role="presentation" focusable="false">
                    <title>Close tooltip</title>
                    <use xlink:href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>

            <h3 class="tooltip__heading">
                Example title
            </h3>

            <div class="tooltip__content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
            </div>
        </div>
    </div>
</div>

<script src="/components/raw/tooltip/tooltip.js"></script>
 
<div class="position-relative top-50">
    <div class="tooltip {{ class }}">
        {{#if triggerButton.icon}}
            {{ render '@button--icon' triggerButton }}
        {{else}}
            {{ render '@button' triggerButton }}
        {{/if}}

        <div
            class="tooltip__content-wrapper"
            aria-hidden="true"
            tabindex="-1"
        >
            {{ render '@button--icon' closeButton }}

            <h3 class="tooltip__heading">
                {{ title }}
            </h3>

            <div class="tooltip__content">
                {{ content }}
            </div>
        </div>
    </div>
</div>

<script src="{{static 'tooltip.js' }}"></script>
 
{
  "class": "tooltip--text",
  "title": "Example title",
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.",
  "triggerButton": {
    "tag": "button",
    "class": "button--fluid tooltip__trigger-button",
    "attributes": "type=\"button\"",
    "text": "Why we recommend",
    "icon": {
      "title": "Show tooltip",
      "id": "info"
    }
  },
  "closeButton": {
    "tag": "button",
    "class": "button--rotate-icon tooltip__close-button",
    "attributes": "type=\"button\" aria-label=\"Close tooltip\"",
    "text": null,
    "icon": {
      "title": "Close tooltip",
      "id": "close",
      "hidden": true
    }
  }
}
  • Content: 
    $tooltip__icon-size                         : 24px !default;

$tooltip__content-wrapper-z-index           : $z-index-high !default;
$tooltip__content-wrapper-width             : 100% !default;
$tooltip__content-wrapper-min-width         : 100% !default;
$tooltip__content-wrapper-min-width\@medium : 288px !default;
$tooltip__content-wrapper-min-width\@large  : 320px !default;
$tooltip__content-background                : $color-primary !default;
$tooltip__content-color                     : $gray-lighter !default;
$tooltip__content-font-weight               : $font-weight-normal !default;
$tooltip__content-text-transform            : initial !default;

$tooltip__after--is-open-background         : $tooltip__content-background !default;

$tooltip__heading-margin                    : $spacer 0 !default;
$tooltip__heading-font-family               : $font-family-base !default;
$tooltip__heading-font-size                 : $font-size-large !default;
$tooltip__heading-font-weight               : $font-weight-bold !default;
$tooltip__heading-text-transform            : initial !default;

$tooltip__trigger-color--text               : $color-primary !default;
$tooltip__trigger-decoration-hover--text    : underline !default;
$tooltip__trigger-bg-color                  : transparent !default;
$tooltip__trigger-icon-fill                 : $color-primary !default;
$tooltip__trigger-icon-fill-hover           : $color-secondary !default;

$tooltip__close-bg-color                    : transparent !default;
$tooltip__close-icon-fill                   : $gray-lighter !default;
  • URL: /components/raw/tooltip/_tooltip-variables.scss
  • Filesystem Path: build/components/Organisms/tooltip/_tooltip-variables.scss
  • Size: 1.6 KB
  • Content: 
    @import 'tooltip-variables';

.tooltip {
    display: flex;
    justify-content: center;

    &:after {
        content: '';
        display: none;
    }

    &--text {
        .tooltip__trigger-button {
            color: $tooltip__trigger-color--text;

            &:hover,
            &.focus-visible {
                text-decoration: $tooltip__trigger-decoration-hover--text;
            }

            .button__text {
                margin: 0;
            }
        }
    }

    &__content-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: $tooltip__content-wrapper-z-index;
        display: none;
        width: $tooltip__content-wrapper-width;
        min-width: $tooltip__content-wrapper-min-width;
        height: auto;
        padding: $spacer--medium $spacer--large $spacer--large;
        background: $tooltip__content-background;
        color: $tooltip__content-color;
        font-size: $font-size-medium;
        text-transform: $tooltip__content-text-transform;
        transform: translate(0%, -100%);
        overflow: hidden;

        p {
            color: $tooltip__content-color;
        }

        @include mq($screen-m) {
            min-width: $tooltip__content-wrapper-min-width\@medium;
        }

        @include mq($screen-l) {
            left: 50%;
            min-width: $tooltip__content-wrapper-min-width\@large;
            transform: translate(-50%, -100%);
        }
    }

    &__content {
        font-weight: $tooltip__content-font-weight;
    }

    &__heading {
        margin: $tooltip__heading-margin;
        font-family: $tooltip__heading-font-family;
        font-size: $tooltip__heading-font-size;
        font-weight: $tooltip__heading-font-weight;
        color: $tooltip__content-color;
        text-transform: $tooltip__heading-text-transform;
    }

    &__trigger-button {
        z-index: $z-index-low;
        background-color: $tooltip__trigger-bg-color;

        .icon {
            fill: $tooltip__trigger-icon-fill;
        }
    }

    &__close-button {
        position: absolute;
        right: $spacer--small;
        top: $spacer--small;
        margin: 0;
        background-color: $tooltip__close-bg-color;

        &:before {
            display: none;
        }

        &:hover,
        &.focus-visible {
            &:before {
                display: none;
            }

            .icon {
                fill: $tooltip__close-icon-fill;
            }
        }

        .icon {
            fill: $tooltip__close-icon-fill;
        }
    }

    &--is-open {
        &:after {
            position: absolute;
            display: block;
            width: $tooltip__icon-size;
            height: $tooltip__icon-size;
            background: $tooltip__after--is-open-background;
            transform: rotate(45deg);
            bottom: calc(100% - #{$spacer});

            @include isIE() {
                left: $spacer--small;
            }
        }

        .tooltip {
            &__content-wrapper {
                display: block;
            }
        }
    }
}
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: build/components/Organisms/tooltip/_tooltip.scss
  • Size: 3.1 KB
  • Content: 
    'use strict';
class Tooltip {
  constructor(element) {
    this.element = element;
    this.triggerButton = element.querySelector('.tooltip__trigger-button');
    this.closeButton = element.querySelector('.tooltip__close-button');
    this.contentWrapper = element.querySelector('.tooltip__content-wrapper');
    this.mq = '(max-width: 767px)';
    this.openClass = 'tooltip--is-open';

    // Global instances of event handlers to allow unbinding events
    this.createGlobalEventHandlers();

    // Init listeners
    this.triggerButton.addEventListener('click', this.onToggleEvent);
  }

  open() {
    this.element.classList.add(this.openClass);
    this.contentWrapper.setAttribute('aria-hidden', 'false');
    this.contentWrapper.focus();

    // Add events only if tooltip is open - prevent overuse.
    this.initListeners();
  }

  close() {
    this.element.classList.remove(this.openClass);
    this.contentWrapper.setAttribute('aria-hidden', 'true');
    this.triggerButton.focus();
    this.killListeners();
  }

  createGlobalEventHandlers() {
    this.onEscapeEvent = event => {
      if (event.which === 27) {
        this.close();
      }
    }

    this.onCloseEvent = () => this.close();

    this.onToggleEvent = () => {
      if (this.element.classList.contains(this.openClass)) {
        this.close();
      }
      else {
        this.open();
      }
    }

    this.onOutsideEvent = event => {
      if (!(this.element.contains(event.target) && !this.closeButton.contains(event.target))) {
        this.close()
      }
    }
  }

  initListeners() {
    window.addEventListener('resize', this.onCloseEvent);
    window.addEventListener('keydown', this.onEscapeEvent);
    window.addEventListener('click', this.onOutsideEvent);
  }

  killListeners() {
    window.removeEventListener('resize', this.onCloseEvent);
    window.removeEventListener('keydown', this.onEscapeEvent);
    window.removeEventListener('click', this.onOutsideEvent);
  }
}

const tooltips = [...document.querySelectorAll('.tooltip')];

tooltips.forEach(tooltip => new Tooltip(tooltip));
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: build/components/Organisms/tooltip/tooltip.js
  • Size: 2.1 KB

There are no notes for this item.