There are no notes for this item.

<button type="button" class="contextual-menu contextual-menu--active">
  <span class="icon__info"></span>
  <span class="tooltip tooltip--large tooltip--contextual tooltip--bottom">
    Information about the item of the left of the icon
  </span>
</button>

<script>
    var triggerContextual = document.getElementsByClassName("contextual-menu");
    var triggerContextualOne = triggerContextual[0];
    var triggerContextualTwo = triggerContextual[1];
    var triggerContextualThree = triggerContextual[2];
    var triggerContextualFour = triggerContextual[3];
    triggerContextualOne.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualTwo.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualThree.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
    triggerContextualFour.onclick = function() {
        this.classList.toggle("contextual-menu--active");
    };
</script>
  • Content:
    /*------------------------------------*\
        #CONTEXTUAL MENU
    \*------------------------------------*/
    
    // Check Tooltip CSS
    
    .contextual-menu {
      border: 0;
      background-color: transparent;
      cursor: pointer;
      position: relative;
    }
    
    .contextual-menu--active .icon__info {
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Einformation-solid%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%231493E6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5%2C2%20C5%2C1.44771525%205.44386482%2C1%206%2C1%20C6.55228475%2C1%207%2C1.44386482%207%2C2%20C7%2C2.55228475%206.55613518%2C3%206%2C3%20C5.44771525%2C3%205%2C2.55613518%205%2C2%20Z%20M5%2C5.00292933%20C5%2C4.44902676%205.44386482%2C4%206%2C4%20C6.55228475%2C4%207%2C4.43788135%207%2C5.00292933%20L7%2C9.99707067%20C7%2C10.5509732%206.55613518%2C11%206%2C11%20C5.44771525%2C11%205%2C10.5621186%205%2C9.99707067%20L5%2C5.00292933%20Z%20M1.75735932%2C10.2426407%20C4.10050507%2C12.5857864%207.89949495%2C12.5857864%2010.2426407%2C10.2426407%20C12.5857864%2C7.89949495%2012.5857864%2C4.10050507%2010.2426407%2C1.75735932%20C7.89949495%2C-0.585786439%204.10050507%2C-0.585786439%201.75735932%2C1.75735932%20C-0.585786439%2C4.10050507%20-0.585786439%2C7.89949495%201.75735932%2C10.2426407%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
    }
    
    .tooltip--error.tooltip--contextual:after,
    .contextual-menu--active .tooltip--contextual:after {
      content: "";
      display: block;
      position: absolute;
      border-style: solid;
      z-index: 4;
    }
    
    .tooltip--error.tooltip--contextual:before,
    .contextual-menu--active .tooltip--contextual:before {
      content: "";
      display: block;
      position: absolute;
      border-style: solid;
      z-index: 3;
    }
    
    .tooltip--contextual.tooltip--top:after,
    .tooltip--contextual.tooltip--top-left:after,
    .tooltip--contextual.tooltip--top-right:after {
      border-width: 7px 5px 0 5px;
      border-color: $border-tooltip-inner transparent transparent;
      bottom: -7px;
    }
    
    .tooltip--contextual.tooltip--top:after,
    .tooltip--contextual.tooltip--top-right:after {
      left: 5px;
    }
    
    .tooltip--contextual.tooltip--top-left:after {
      right: 5px;
    }
    
    .tooltip--contextual.tooltip--top:before,
    .tooltip--contextual.tooltip--top-left:before,
    .tooltip--contextual.tooltip--top-right:before {
      border-width: 8px 6px 0 6px;
      border-color: $border-tooltip transparent transparent;
      bottom: -8px;
    }
    
    .tooltip--contextual.tooltip--top:before,
    .tooltip--contextual.tooltip--top-right:before {
      left: 4px;
    }
    
    .tooltip--contextual.tooltip--top-left:before {
      right: 4px;
    }
    
    .tooltip--contextual.tooltip--right:after {
      border-width: 5px 7px 5px 0;
      border-color: transparent $border-tooltip-inner transparent transparent;
      top: 6px;
      right: 100%;
    }
    
    .tooltip--contextual.tooltip--right:before {
      border-width: 6px 8px 6px 0;
      border-color: transparent $border-tooltip transparent transparent;
      top: 5px;
      right: 100%;
    }
    
    .tooltip--contextual.tooltip--bottom:after,
    .tooltip--contextual.tooltip--bottom-left:after,
    .tooltip--contextual.tooltip--bottom-right:after {
      border-width: 0 5px 7px 5px;
      border-color: transparent transparent $border-tooltip-inner;
      top: -7px;
    }
    
    .tooltip--contextual.tooltip--bottom:after,
    .tooltip--contextual.tooltip--bottom-right:after {
      left: 5px;
    }
    
    .tooltip--contextual.tooltip--bottom-left:after {
      right: 5px;
    }
    
    .tooltip--contextual.tooltip--bottom:before,
    .tooltip--contextual.tooltip--bottom-left:before,
    .tooltip--contextual.tooltip--bottom-right:before {
      border-width: 0 6px 8px 6px;
      border-color: transparent transparent $border-tooltip;
      top: -8px;
    }
    
    .tooltip--contextual.tooltip--bottom:before,
    .tooltip--contextual.tooltip--bottom-right:before {
      left: 4px;
    }
    
    .tooltip--contextual.tooltip--bottom-left:before {
      right: 4px;
    }
    
    .tooltip--contextual.tooltip--left:after {
      border-width: 5px 0 5px 7px;
      border-color: transparent transparent transparent $border-tooltip-inner;
      top: 6px;
      left: 100%;
    }
    
    .tooltip--contextual.tooltip--left:before {
      border-width: 6px 0 6px 8px;
      border-color: transparent transparent transparent $border-tooltip;
      top: 5px;
      left: 100%;
    }
    
  • URL: /components/raw/contextual-menu/contextual-menu.scss
  • Filesystem Path: components/02-atoms/14-contextual-menu/contextual-menu.scss
  • Size: 5.2 KB