Tooltip: Bottom

<div style="padding: 4rem 0; text-align: center;">
    <span>
        Ik heb een tooltip
        <button type="button" class="button button--icon tooltip-trigger" data-placement="bottom" data-title="Extra information in de popover">
            <span aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
                    <path d="M9.07,4.43A1.3,1.3,0,0,0,7.61,3.07a2.78,2.78,0,0,0-2,1L3.89,2.46A5.5,5.5,0,0,1,8,.5c2.33,0,4.1,1.15,4.1,3.71s-3.25,3.47-3,6H6.34C5.9,7.28,9.07,6.06,9.07,4.43ZM5.81,13.5a1.92,1.92,0,1,1,3.83,0,1.92,1.92,0,1,1-3.83,0Z" />
                </svg>
            </span>
            <span class="screen-reader-only">Beschrijft deze actie</span>
        </button>
    </span>
</div>
<div style="padding: 4rem 0; text-align: center;">
  <span>
    Ik heb een tooltip
    <button type="button" class="button button--icon{{#if extraClasses}} {{{ extraClasses }}}{{/if}}"{{#if attributes}}{{{ attributes }}}{{/if}}>
      <span aria-hidden="true">
        {{#if exclamationMark}}
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
            <path d="M6.3,12.77a1.7,1.7,0,1,1,3.4,0,1.7,1.7,0,1,1-3.4,0ZM6.68,4,6.59,1.46H9.41L9.32,4l-.4,5.86H7.07Z"/>
          </svg>
        {{else}}
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
            <path d="M9.07,4.43A1.3,1.3,0,0,0,7.61,3.07a2.78,2.78,0,0,0-2,1L3.89,2.46A5.5,5.5,0,0,1,8,.5c2.33,0,4.1,1.15,4.1,3.71s-3.25,3.47-3,6H6.34C5.9,7.28,9.07,6.06,9.07,4.43ZM5.81,13.5a1.92,1.92,0,1,1,3.83,0,1.92,1.92,0,1,1-3.83,0Z"/>
          </svg>
        {{/if}}
      </span>
      <span class="screen-reader-only">{{ screenReaderText }}</span>
    </button>
  </span>
</div>
{
  "screenReaderText": "Beschrijft deze actie",
  "attributes": "data-placement=\"bottom\" data-title=\"Extra information in de popover\"",
  "extraClasses": "tooltip-trigger"
}
  • Content:
    $popover-space: .5rem;
    $popover-background-color: $grey-dark;
    $popover-border-color: $grey-dark;
    $popover-max-width: 20em;
    $popover-border-radius: $border-radius;
    $popover-font-size: .7778rem; // @todo Check if we can calculate this value with respect to existing font size (fs) list.
    
    .tooltiplabel {
      cursor: help;
    }
    
    abbr[title][class*="tooltiplabel"] {
      text-decoration: none;
      border: 2px solid #000;
      border-style: none;
      border-bottom-style: dotted;
    }
    
    .tooltip {
    
      // Variables
      $parent: &;
    
      position: absolute;
      background-color: $popover-background-color;
      color: $white;
      max-width: $popover-max-width;
      border: $border-width $border-style $popover-background-color;
      border-radius: $popover-border-radius;
      font-size: $popover-font-size;
      text-align: center;
      z-index: $steps-indicator-third-layer + 1;
    
      // Top
      &[x-placement^="top"] {
        margin-bottom: $popover-space;
    
        #{$parent}__arrow {
          border-width: $popover-space $popover-space 0 $popover-space;
          border-left-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
          bottom: -($popover-space);
          left: calc(50% - #{$popover-space});
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    
      // Bottom
      &[x-placement^="bottom"] {
        margin-top: $popover-space;
    
        #{$parent}__arrow {
          border-width: 0 $popover-space $popover-space $popover-space;
          border-left-color: transparent;
          border-right-color: transparent;
          border-top-color: transparent;
          top: -($popover-space);
          left: calc(50% - #{$popover-space});
          margin-bottom: 0;
          margin-top: 0;
        }
      }
    
      // Left
      &[x-placement^="left"] {
        margin-right: $popover-space;
    
        #{$parent}__arrow {
          border-width: $popover-space 0 $popover-space $popover-space;
          border-top-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
          right: -($popover-space);
          top: calc(50% - #{$popover-space});
          margin-left: 0;
          margin-right: 0;
        }
      }
    
      // Right
      &[x-placement^="right"] {
        margin-left: $popover-space;
    
        #{$parent}__arrow {
          border-width: $popover-space $popover-space $popover-space 0;
          border-left-color: transparent;
          border-top-color: transparent;
          border-bottom-color: transparent;
          left: -($popover-space);
          top: calc(50% - #{$popover-space});
          margin-left: 0;
          margin-right: 0;
        }
      }
    
      // Arrow
      &__arrow {
        border-color: $popover-border-color;
    
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        margin: ($popover-space * 0.5);
      }
    
      // Inner
      &__inner {
        padding: ($popover-space * 0.5) $popover-space;
      }
    }
    
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: src/components/01-componenten/tooltip/_tooltip.scss
  • Size: 2.7 KB
  • Content:
    import ExternalTooltip from 'tooltip.js';
    
    export default function Tooltip (containerElement) {
      var placement = containerElement.dataset.placement;
      var title = containerElement.dataset.title;
    
      var options = {
        trigger: 'hover',
        closeOnClickOutside: true,
        container: document.body,
        boundariesElement: document.body,
      };
    
      if (placement) {
        options.placement = placement;
      }
    
      if (title) {
        options.title = title;
      }
    
      options.template = '' +
        '<div class="tooltip" role="alert">' +
        '<div class="tooltip__arrow"></div>' +
        '<div class="tooltip__inner"></div>' +
        '</div>';
    
      options.popperOptions = {
        positionFixed: true,
      };
    
      const tooltip = new ExternalTooltip(containerElement, options);
    
      containerElement.addEventListener("keydown", function(event) {
        switch(event.keyCode) {
          case 13:
          case 32:
            tooltip.toggle();
            break;
          case 27:
            tooltip.hide();
            break;
        }
      });
    
      containerElement.addEventListener("blur", function() {
        tooltip.hide();
      });
    }
    
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: src/components/01-componenten/tooltip/tooltip.js
  • Size: 1.1 KB