<div class="tooltip">For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint.</div>
<div class="tooltip">{{value}}</div>
{
  "value": "For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint."
}
  • Content:
    (function (window) {
      'use strict';
    
      const tooltipOpenClass = 'js-tooltip--open';
    
      function handleOpenTooltip(ev) {
        const openTooltips = document.querySelectorAll(`.${tooltipOpenClass}`);
    
        this.nextElementSibling.classList.add(tooltipOpenClass);
    
        for (let i = 0; i < openTooltips.length; i++) {
          openTooltips[i].classList.remove(tooltipOpenClass);
        }
    
        ev.preventDefault();
      }
    
      function init() {
        const tooltipLinks = document.querySelectorAll('.js-tooltip-open-link');
    
        for (let i = 0; i < tooltipLinks.length; i++) {
          tooltipLinks[i].addEventListener('click', handleOpenTooltip);
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: src/components/01-elements/tooltip/tooltip.js
  • Size: 836 Bytes
  • Content:
    .tooltip {
      position: relative;
      top: 5px;
      max-width: 380px;
      padding: 15px;
      border: 1px solid $color-primary;
      border-radius: 5px;
      background-color: $color-white;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: normal;
      line-height: 2.0rem;
      box-shadow: 0 10px 10px 0 rgba(red($color-primary), green($color-primary), blue($color-primary), .2);
      z-index: 10;
    
      &:before {
        position: absolute;
        top: -5px;
        left: 5px;
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-bottom: 5px solid $color-primary;
        border-left: 10px solid transparent;
        content: '';
        z-index: 1;
      }
    }
    
    ul.tooltip {
      margin: 0;
      list-style: none;
    
      li {
        padding: 4px 0;
      }
    }
    
  • URL: /components/raw/tooltip/tooltip.scss
  • Filesystem Path: src/components/01-elements/tooltip/tooltip.scss
  • Size: 727 Bytes

There are no notes for this item.