<div class="select-tooltip js-select-tooltip">
    <button class="js-select-tooltip-trigger">Sort</button>
    <select name="sort-by" class="js-select-tooltip-select">
    <option value="new-arrivals" selected="selected">New Arrivals</option>
    <option value="price-asc">Price (low to high)</option>
    <option value="price-dsc">Price (high to low)</option>
    <option value="name-asc">Name (A-Z)</option>
    <option value="name-dsc">Name (Z-A)</option>
  </select>
    <ul class="tooltip js-select-tooltip-list">
        <li class="js-select-tooltip-option js-select-tooltip-option--active" data-value="new-arrivals">New Arrivals</li>
        <li class="js-select-tooltip-option" data-value="price-asc">Price (low to high)</li>
        <li class="js-select-tooltip-option" data-value="price-dsc">Price (high to low)</li>
        <li class="js-select-tooltip-option" data-value="name-asc">Name (A-Z)</li>
        <li class="js-select-tooltip-option" data-value="name-dsc">Name (Z-A)</li>
    </ul>
</div>
<div class="select-tooltip js-select-tooltip">
  <button class="js-select-tooltip-trigger">Sort</button>
  <select{{#if name}} name="{{name}}"{{/if}} class="js-select-tooltip-select">
    {{#each options}}
    <option value="{{id}}"{{#if default}} selected="selected"{{/if}}>{{label}}</option>
    {{/each}}
  </select>
  <ul class="tooltip js-select-tooltip-list">
    {{#each options}}
    <li class="js-select-tooltip-option{{#if default}} js-select-tooltip-option--active{{/if}}" data-value="{{id}}">{{label}}</li>
    {{/each}}
  </ul>
</div>
{
  "id": "form-example-sort-by",
  "name": "sort-by",
  "label": "Sort by",
  "options": [
    {
      "id": "new-arrivals",
      "label": "New Arrivals",
      "default": true
    },
    {
      "id": "price-asc",
      "label": "Price (low to high)"
    },
    {
      "id": "price-dsc",
      "label": "Price (high to low)"
    },
    {
      "id": "name-asc",
      "label": "Name (A-Z)"
    },
    {
      "id": "name-dsc",
      "label": "Name (Z-A)"
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const wrapperOpenClass = 'js-select-tooltip--open';
      const activeOptionClass = 'js-select-tooltip-option--active';
    
      function handleTrigger(e) {
        e.target.closest('.js-select-tooltip').classList.toggle(wrapperOpenClass);
      }
    
      // Treat the tooltip option click like a select list option element click.
      function handleTooltipOption(e) {
        const tooltipOption = e.target;
        const wrapper = tooltipOption.closest('.js-select-tooltip');
        const select = wrapper.querySelector('.js-select-tooltip-select');
    
        wrapper.classList.remove(wrapperOpenClass);
        select.value = tooltipOption.getAttribute('data-value');
        triggerNativeEvent(select, 'change');
      }
    
      // Update the tooltip options to stay in sync with the select list options.
      function handleSelect(e) {
        const select = e.target;
        const value = select.value;
        const wrapper = select.closest('.js-select-tooltip');
        const tooltipOptions = wrapper.querySelectorAll('.js-select-tooltip-option');
    
        for (let i = 0; i < tooltipOptions.length; i++) {
          const option = tooltipOptions[i];
    
          if (option.getAttribute('data-value') == value) {
            option.classList.add(activeOptionClass);
          }
          else {
            option.classList.remove(activeOptionClass);
          }
        }
      }
    
      function init() {
        const wrappers = document.querySelectorAll('.js-select-tooltip');
    
        for (let i = 0; i < wrappers.length; i++) {
          if (!wrappers[i].classList.contains('js-component-init')) {
            const trigger = wrappers[i].querySelector('.js-select-tooltip-trigger');
            const select = wrappers[i].querySelector('.js-select-tooltip-select');
            const tooltipOptions = wrappers[i].querySelectorAll('.js-select-tooltip-option');
    
            trigger.addEventListener('click', handleTrigger);
    
            select.addEventListener('change', handleSelect);
    
            for (let i = 0; i < tooltipOptions.length; i++) {
              tooltipOptions[i].addEventListener('click', handleTooltipOption);
            }
    
            wrappers[i].classList.add('js-component-init');
          }
        }
      }
    
      // 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/select-tooltip/select-tooltip.js
  • Filesystem Path: src/components/01-elements/form-items/select/select-tooltip/select-tooltip.js
  • Size: 2.3 KB
  • Content:
    .select-tooltip {
      display: inline-block;
      position: relative;
    
      button > * {
        pointer-events: none;
      }
    
      // The smallest breakpoint opens the select list using the browser behavior
      // for the best mobile experience. All other breakpoints will use the sibling
      // tooltip element.
      select {
        @include breakpoint($breakpoint-sm) {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          cursor: pointer;
          opacity: 0;
        }
    
        @include breakpoint($breakpoint-md) {
          display: none;
        }
      }
    
      ul {
        display: none;
        position: absolute;
        top: calc(100% + 5px);
        white-space: nowrap;
      }
    }
    
    .js-select-tooltip--open {
      @include breakpoint($breakpoint-md) {
        ul {
          display: block;
        }
    
        li {
          color: $color-darkest;
          cursor: pointer;
    
          &:hover {
            color: $color-primary;
          }
        }
      }
    }
    
    .js-select-tooltip-option--active {
      font-weight: $font-weight-bold;
    }
    
  • URL: /components/raw/select-tooltip/select-tooltip.scss
  • Filesystem Path: src/components/01-elements/form-items/select/select-tooltip/select-tooltip.scss
  • Size: 1 KB
  • Handle: @select-tooltip
  • Preview:
  • Filesystem Path: src/components/01-elements/form-items/select/select-tooltip/select-tooltip.html

There are no notes for this item.