<div class="tooltip--interactive-container">
    <div class="tooltip--interactive" aria-describedby="tooltip">
        <div class="tooltip--interactive--triggerwrapper">
            <button class="tooltip--interactive--triggerwrapper-trigger" tabindex="1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
                    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,13a1.2,1.2,0,1,1,1.2-1.2A1.2,1.2,0,0,1,8,13Zm3.28-6.88a2.32,2.32,0,0,1-.16.51,2.31,2.31,0,0,1-.52.8A2.44,2.44,0,0,1,9,8.18V9.5H7V6.63H8.5a1,1,0,0,0,.86-.51A1.07,1.07,0,0,0,9.5,5.6a1,1,0,0,0-1-1h-1A1,1,0,0,0,7,4.69a1.06,1.06,0,0,0-.51.91H4.66A2.6,2.6,0,0,1,6.5,3.09,1.7,1.7,0,0,1,7,3H8.83a2.55,2.55,0,0,1,2.5,2.6A3.15,3.15,0,0,1,11.28,6.12Z" />
                </svg></button>
        </div>
        <div class="tooltip--interactive--body  tooltip--interactive--body_bottom" aria-hidden="true">
            <div class="tooltip--interactive--body--triangle  tooltip--interactive--body--triangle_bottom"></div>
            <div class="tooltip--interactive--body--content">
                <div class="tooltip--interactive--body--content-header">
                    <h4>Dit is een korte titel</h4>
                    <button class="cross">
                        <svg x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
                            <rect x="-2.1" y="6.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.3137 8)" width="20.1" height="2.5" />
                            <rect x="-2.1" y="6.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 8 -3.3137)" width="20.1" height="2.5" />
                        </svg>
                    </button>
                </div>
                <p>Dit is een korte beschrijving van een tooltip op een desktop scherm. Hier komt meer informatie te staan over een element.</p>
                <div class="tooltip--interactive--body--content-footer">
                    <a href="#">Lees meer over percelen</a>
                    <button class="tooltip--button button button--primary medium">Button</button>
                </div>
            </div>
        </div>
    </div>

    <div class="tooltip--interactive " aria-describedby="tooltip">
        <div class="tooltip--interactive--triggerwrapper">
            <button class="tooltip--interactive--triggerwrapper-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
                    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,13a1.2,1.2,0,1,1,1.2-1.2A1.2,1.2,0,0,1,8,13Zm3.28-6.88a2.32,2.32,0,0,1-.16.51,2.31,2.31,0,0,1-.52.8A2.44,2.44,0,0,1,9,8.18V9.5H7V6.63H8.5a1,1,0,0,0,.86-.51A1.07,1.07,0,0,0,9.5,5.6a1,1,0,0,0-1-1h-1A1,1,0,0,0,7,4.69a1.06,1.06,0,0,0-.51.91H4.66A2.6,2.6,0,0,1,6.5,3.09,1.7,1.7,0,0,1,7,3H8.83a2.55,2.55,0,0,1,2.5,2.6A3.15,3.15,0,0,1,11.28,6.12Z" />
                </svg></button>
        </div>
        <div class="tooltip--interactive--body  tooltip--interactive--body_bottom" aria-hidden="true">
            <div class="tooltip--interactive--body--triangle  tooltip--interactive--body--triangle_bottom"></div>
            <div class="tooltip--interactive--body--content">
                <div class="wrapper">
                    <p>Dit is een korte beschrijving van een tooltip op een desktop scherm. Hier komt meer informatie te staan over een element.</p>
                    <button class="cross">
                        <svg x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
                            <rect x="-2.1" y="6.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.3137 8)" width="20.1" height="2.5" />
                            <rect x="-2.1" y="6.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 8 -3.3137)" width="20.1" height="2.5" />
                        </svg>
                    </button>
                </div>
                <div class="tooltip--interactive--body--content-footer">
                    <a href="#">Lees meer over percelen</a>
                    <button class="tooltip--button button button--primary medium">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tooltip--interactive-container">
    <div class="tooltip--interactive" aria-describedby="tooltip">
        <div class="tooltip--interactive--triggerwrapper">
            <button class="tooltip--interactive--triggerwrapper-trigger" tabindex="1">{{> @icon--question-circle }}</button>
        </div>
        <div class="tooltip--interactive--body {{#if wrapperClass}} {{wrapperClass}}{{/if}}" aria-hidden="true">
            <div class="tooltip--interactive--body--triangle {{#if themeClass}} {{themeClass}}{{/if}}"></div>
            <div class="tooltip--interactive--body--content">
                <div class="tooltip--interactive--body--content-header">
                    <h4>Dit is een korte titel</h4>
                    <button class="cross">{{> @icon--cross }}</button>
                </div>
                <p>Dit is een korte beschrijving van een tooltip op een desktop scherm. Hier komt meer informatie te staan over een element.</p>
                <div class="tooltip--interactive--body--content-footer">
                    <a href="#">Lees meer over percelen</a>
                    <button class="tooltip--button button button--primary medium">Button</button>
                </div>
            </div>
        </div>
    </div>

    <div class="tooltip--interactive {{#if visibility}}{{visibility}}{{/if}}" aria-describedby="tooltip">
        <div class="tooltip--interactive--triggerwrapper">
            <button class="tooltip--interactive--triggerwrapper-trigger">{{> @icon--question-circle }}</button>
        </div>
        <div class="tooltip--interactive--body {{#if wrapperClass}} {{wrapperClass}}{{/if}}" aria-hidden="true">
            <div class="tooltip--interactive--body--triangle {{#if themeClass}} {{themeClass}}{{/if}}"></div>
            <div class="tooltip--interactive--body--content">
                <div class="wrapper">
                    <p>Dit is een korte beschrijving van een tooltip op een desktop scherm. Hier komt meer informatie te staan over een element.</p>
                    <button class="cross">{{> @icon--cross }}</button>
                </div>
                <div class="tooltip--interactive--body--content-footer">
                    <a href="#">Lees meer over percelen</a>
                    <button class="tooltip--button button button--primary medium">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>
{
  "wrapperClass": "tooltip--interactive--body_bottom",
  "themeClass": "tooltip--interactive--body--triangle_bottom",
  "visibility": null
}
  • Content:
    $tooltipWidth: 25%;
    $offsetTooltip: 2px;
    $smallTriangleBorder: 9px;
    $offsetTopTooltip: 20px;
    $offsetLeftRight: 3px;
    
    .tooltip--interactive {
      $parent: &;
      max-width: $tooltipWidth;
      margin: 15em;
    
      
      &--triggerwrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: $space-xxs;
    
        button {
          border: 0;
          padding: 0;
          background: none;
        } 
        .icon {
          width: 1.7em;
          height: 1.7em;
        }
    
        &-trigger {
          color: $green;
          cursor: pointer;
        }
      }
    
      &--body {
        display: flex;
        align-items: center;
        
        &--triangle {
          width: 0;
          height: 0;
          position: relative;
          z-index: 1;
          visibility: hidden;
    
          &_bottom, &_top {
            border-left: $space-xs solid transparent;
            border-right: $space-xs solid transparent;
          }
    
          &_bottom::after, &_top::after {
            border-left: $smallTriangleBorder solid transparent;
            border-right: $smallTriangleBorder solid transparent;
          }
    
          &_bottom {
            border-bottom: $space-xs solid $grey-light;
            top: calc(-#{$offsetTooltip} * 3);
          }
    
          &_bottom::after {
            border-bottom: $smallTriangleBorder solid $white-dark;
            top: $offsetLeftRight;
            right: calc(-#{$offsetLeftRight} * 3);
          }
    
          &_top {
            border-top: $space-xs solid $grey-light;
            top: calc(#{$offsetTooltip} * 3);
          }
    
          &_top::after {
            border-top: $smallTriangleBorder solid $white-dark;
            top: calc(-#{$offsetLeftRight} * 4);
            right: calc(-#{$offsetLeftRight} * 3);
          }
    
          &_left, &_right {
            border-top: $space-xs solid transparent;
            border-bottom: $space-xs solid transparent;
          }
          
          &_left::after, &_right::after {
            border-top: $smallTriangleBorder solid transparent;
            border-bottom: $smallTriangleBorder solid transparent;
          }
    
          &_left {
            border-left: $space-xs solid $grey-light;
            left: calc(#{$offsetTooltip} * 3);
          }
    
          &_left::after {
            border-left: $smallTriangleBorder solid $white-dark;
            top: calc(-#{$offsetLeftRight} * 3);
            right: $offsetLeftRight;
          }
    
          &_right {
            border-right: $space-xs solid $grey-light;
            right: calc(#{$offsetTooltip} * 3);
          }
    
          &_right::after {
            border-right: $smallTriangleBorder solid $white-dark;
            top: calc(-#{$offsetLeftRight} * 3);
            left: $offsetLeftRight;
          }
    
        }
    
        &--triangle::after {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
        }
    
        &--content {
          background: $white-dark;
          width: $tooltipWidth;
          font-size: $fs-down-1;
          position: absolute;
          padding: $space-s $space-s;
          border: $offsetTooltip solid $grey-light;
          visibility: hidden;
    
          .cross {
            text-decoration: none;
            color: black;
            border: 0;
            padding: 0;
            background-color: transparent;
            display: none;
          }
    
          &-header {
            
            display: flex;
            justify-content: space-between;
            align-items: baseline;
    
            h4 {
              margin-bottom: calc(#{$space-xs} + #{$space-xxs});
            }
    
          }
    
          p {
            margin: 0;
          }
    
          &-footer {
            display: flex;
            justify-content: space-between;
            padding-top: $space-m;
          }
        }
      }
    
      &--body_top {
        flex-direction: column-reverse;
        margin-top: calc(-#{$offsetTooltip} * 18);
      }
    
      &--body_bottom {
        flex-direction: column;
        margin-top: calc(#{math.div($offsetTopTooltip, 3)});
      }
    
      &--body_left {
        flex-direction: row-reverse;
        margin-right:  calc(50% + 17px);
        margin-top: -$offsetTopTooltip;
      }
    
      &--body_right {
        margin-left:  calc(50% + 17px);
        margin-top: -$offsetTopTooltip;
      }
    }
    
    .visible {
      visibility: visible;
    }
    
    .hidden {
      display: none;
    }
    
    @media (max-width: $tablet-landscape) {
      .tooltip--interactive--body--content {
        width: 50%;
      }
    }
    
    @media (max-width: $tablet-portrait) {
        .tooltip--interactive--body--content {
          width: 70%;
        }
    }
    
    @media (max-width: $mobile) {
    
        .tooltip--interactive {
          $parent: &;
    
          &--body {
            position: absolute;
            left: 0;
            top: 33%;
    
            &_left {
              margin-right: 10%;
              margin-top: 0;
            }
          
            &_right {
              margin-left: 10%;
              margin-top: 0;
            }
      
            &--triangle {
              display: none;
            }
    
            &--content {
              width: 90%;
              position: relative;
              display: none;
    
              .wrapper {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
              }
    
              .cross {
                display: block;
              }
    
              &-footer {
                flex-direction: column-reverse;
                align-items: stretch;
    
                .tooltip--button {
                  margin-bottom: $space-xs;
                }
              }
            }
        }
      }
    }
    
    
    
    
  • URL: /components/raw/tooltip-interactive/_tooltip-interactive.scss
  • Filesystem Path: src/components/01-componenten/tooltip-interactive/_tooltip-interactive.scss
  • Size: 5.1 KB
  • Content:
    /**
     * Component
     *
     * @param {Element} element
     */
    
    export default function TooltipInteractive() {
      /* eslint-disable */
    
      var btnNodes = document.getElementsByClassName("tooltip--interactive--triggerwrapper-trigger");
      var tooltipNodes = document.getElementsByClassName("tooltip--interactive--body--content");
      var triangleNodes = document.getElementsByClassName("tooltip--interactive--body--triangle");
      var buttonWrapper = document.getElementsByClassName("tooltip--interactive--triggerwrapper");
      var tooltip = document.getElementsByClassName("tooltip--interactive--body");
      var crossButton = document.getElementsByClassName("cross");
    
      function toggleVisible(number) {
        tooltipNodes[number].classList.add("visible");
        triangleNodes[number].classList.add("visible");
        tooltipNodes[number].style.display = "block";
        tooltip[number].setAttribute("aria-hidden", "false");
      }
    
      function toggleHidden() {
        for (let i = 0; i < tooltipNodes.length; i++) {
          if (tooltipNodes[i]) {
            tooltipNodes[i].classList.remove("visible");
          }
        }
        for (let i = 0; i < triangleNodes.length; i++) {
          if (triangleNodes[i]) {
            triangleNodes[i].classList.remove("visible");
          }
        }
        for (let i = 0; i < tooltip.length; i++) {
          if (tooltip[i]) {
            tooltip[i].setAttribute("aria-hidden", "true");
          }
        }
        var width = window.innerWidth;
        if (width <= 480) {
          for (let i = 0; i < tooltipNodes.length; i++) {
            if (tooltipNodes[i]) {
              tooltipNodes[i].style.display = "none";
            }
          }
        }
      }
    
      for (var i = 0; i < btnNodes.length; i++) {
        btnNodes[i].addEventListener('click', (function (j) {
            return function () {
              if (!tooltipNodes[j].classList.contains("visible")) {
                tooltipPlacement(j);
                toggleHidden();
                toggleVisible(j);
              } else {
                toggleHidden();
              }
            }
          })(i)
        )
      }
    
      for (var i = 0; i < crossButton.length; i++) {
        crossButton[i].addEventListener("click", function () {
          toggleHidden();
        });
      }
    
      //Press esc to exit tooltip
      document.addEventListener("keyup", function (e) {
        if (e.keyCode == 27) {
          toggleHidden();
        }
      });
    
      //click outside the tooltip to exit
      window.addEventListener("click", function (event) {
        var clickedInsideTooltipOrButton = false;
    
        for (var y = 0; y < btnNodes.length; y++) {
          var buttonChildElements = [];
          var iconPath = this.document.getElementsByTagName("path")[y];
          while (iconPath != buttonWrapper[y]) {
            buttonChildElements.unshift(iconPath);
            iconPath = iconPath.parentNode;
          }
          buttonChildElements.forEach(function (node) {
            if (node == event.target) {
              clickedInsideTooltipOrButton = true;
            }
          });
    
          var tooltipChildElements = [];
          for (var i = 0; i <= tooltipNodes[y].getElementsByTagName("*").length; i++) {
            tooltipChildElements.push(tooltipNodes[y].getElementsByTagName("*")[i]);
          }
          tooltipChildElements.forEach(function (node) {
            if (node == event.target || event.target == tooltipNodes[y]) {
              clickedInsideTooltipOrButton = true;
            }
          });
        }
        if (!clickedInsideTooltipOrButton) {
          toggleHidden();
        }
      });
    
      function addRemoveClassTooltip(placement, tooltipNumber) {
        var tooltip = document.getElementsByClassName("tooltip--interactive--body")[tooltipNumber];
        var tooltipArrow = document.getElementsByClassName("tooltip--interactive--body--triangle")[tooltipNumber];
    
        tooltip.classList.remove("tooltip--interactive--body_left");
        tooltipArrow.classList.remove("tooltip--interactive--body--triangle_left");
        tooltip.classList.remove("tooltip--interactive--body_right");
        tooltipArrow.classList.remove("tooltip--interactive--body--triangle_right");
        tooltip.classList.remove("tooltip--interactive--body_bottom");
        tooltipArrow.classList.remove("tooltip--interactive--body--triangle_bottom");
        tooltip.classList.remove("tooltip--interactive--body_top");
        tooltipArrow.classList.remove("tooltip--interactive--body--triangle_top");
    
    
        switch (placement) {
          case "left":
            tooltip.classList.add("tooltip--interactive--body_left");
            tooltipArrow.classList.add("tooltip--interactive--body--triangle_left");
            break;
          case "right":
            tooltip.classList.add("tooltip--interactive--body_right");
            tooltipArrow.classList.add("tooltip--interactive--body--triangle_right");
            break;
          case "bottom":
            tooltip.classList.add("tooltip--interactive--body_bottom");
            tooltipArrow.classList.add("tooltip--interactive--body--triangle_bottom");
            break;
          case "top":
            tooltip.classList.add("tooltip--interactive--body_top");
            tooltipArrow.classList.add("tooltip--interactive--body--triangle_top");
            break;
        }
      }
    
      function tooltipPlacement(tooltipNumber) {
    
        var tooltipInteractive = document.getElementsByClassName("tooltip--interactive")[tooltipNumber];
        var checkBoven = document.getElementsByClassName("tooltip--interactive--body_top")[tooltipNumber];
        var checkOnder = document.getElementsByClassName("tooltip--interactive--body_bottom")[tooltipNumber];
        var tooltipStyle = window.getComputedStyle(document.getElementsByClassName("tooltip--interactive--body--content")[tooltipNumber]);
        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;
    
        //check if tooltip is either top or bottom
        if (checkBoven || checkOnder != undefined) {
          var tooltipHalfWidth = parseFloat(tooltipStyle.width) / 2;
          var wrapperOffset = document.getElementsByClassName("tooltip--interactive--triggerwrapper")[tooltipNumber].offsetWidth / 2;
          var marginLeftTooltip = tooltipInteractive.getBoundingClientRect().left + wrapperOffset;
          var marginRightTooltip = windowWidth - marginLeftTooltip;
    
          if (windowWidth >= 700) {
            if (tooltipHalfWidth > marginRightTooltip) {
              //tooltip should go left
              addRemoveClassTooltip("left", tooltipNumber);
            }
    
            if (tooltipHalfWidth > marginLeftTooltip) {
              //tooltip should go right
              addRemoveClassTooltip("right", tooltipNumber);
            }
          }
    
          var tooltipHeight = parseFloat(tooltipStyle.height);
          var arrow = document.getElementsByClassName("tooltip--interactive--body--triangle_top")[tooltipNumber] ||
            document.getElementsByClassName("tooltip--interactive--body--triangle_bottom")[tooltipNumber];
          if (arrow != undefined) {
            var arrowStyle = window.getComputedStyle(arrow);
            var arrowHeight = parseFloat(arrowStyle.top);
          }
          if (arrowHeight < 0) {
            arrowHeight = arrowHeight * -1;
          }
          var totalTooltipHeight = tooltipHeight + arrowHeight;
          var marginTopTooltip = tooltipInteractive.getBoundingClientRect().top;
          var marginBottomTooltip = windowHeight - marginTopTooltip;
    
          if (marginTopTooltip < totalTooltipHeight) {
            //tooltip should go down
            addRemoveClassTooltip("bottom", tooltipNumber);
          }
    
          if (marginBottomTooltip < totalTooltipHeight) {
            //tooltip should go up
            addRemoveClassTooltip("top", tooltipNumber);
          }
        }
    
        //check if tooltip is either left or right
        var checkLinks = document.getElementsByClassName("tooltip--interactive--body_left")[tooltipNumber];
        var checkRechts = document.getElementsByClassName("tooltip--interactive--body_right")[tooltipNumber];
    
        if (checkLinks || checkRechts != undefined) {
          var tooltipHalfHeight = parseFloat(tooltipStyle.height) / 2;
          var marginTopTooltip = tooltipInteractive.getBoundingClientRect().top;
          var marginBottomTooltip = windowHeight - marginTopTooltip;
    
          if (tooltipHalfHeight > marginTopTooltip) {
            //tooltip should go down
            addRemoveClassTooltip("bottom", tooltipNumber);
          }
    
          if (tooltipHalfHeight > marginBottomTooltip) {
            //tooltip should go up
            addRemoveClassTooltip("top", tooltipNumber);
          }
    
          var tooltipWidth = parseFloat(tooltipStyle.width);
          var arrow = document.getElementsByClassName("tooltip--interactive--body--triangle_left")[tooltipNumber] ||
            document.getElementsByClassName("tooltip--interactive--body--triangle_right")[tooltipNumber];
          if (arrow != undefined) {
            var arrowStyle = window.getComputedStyle(arrow);
            var arrowWidth = parseFloat(arrowStyle.left) || parseFloat(arrowStyle.right);
          }
          var totalTooltipWidth = tooltipWidth + arrowWidth;
          var wrapperOffset = document.getElementsByClassName("tooltip--interactive--triggerwrapper")[tooltipNumber].offsetWidth / 2;
          var marginLeftTooltip = tooltipInteractive.getBoundingClientRect().left + wrapperOffset;
          var marginRightTooltip = windowWidth - marginLeftTooltip;
    
          if (totalTooltipWidth > marginRightTooltip && totalTooltipWidth > marginLeftTooltip) {
            //tooltip should go down
            addRemoveClassTooltip("bottom", tooltipNumber);
          } else {
            if (totalTooltipWidth > marginLeftTooltip) {
              //tooltip should go right
              addRemoveClassTooltip("right", tooltipNumber);
            }
    
            if (totalTooltipWidth > marginRightTooltip) {
              //tooltip should go left
              addRemoveClassTooltip("left", tooltipNumber);
            }
          }
        }
      }
    }
    
  • URL: /components/raw/tooltip-interactive/tooltip-interactive.js
  • Filesystem Path: src/components/01-componenten/tooltip-interactive/tooltip-interactive.js
  • Size: 9.5 KB

There are no notes for this item.