scss提示-scss(代码片段)

关键词：

var tooltip = require('./tooltip');

module.exports = window.userAccount = (function () 
    'use strict';

    var userAccountTooltip = document.getElementById('user-account-tooltip');

    var toggle = function () 
        tooltip.hideAllExcept(userAccountTooltip);
        tooltip.toggle(userAccountTooltip);
    ;

    return 
        toggle: toggle
    ;
)();

var tooltip = require('./tooltip');

module.exports = window.cart = (function () 
    'use strict';

    var cartTooltip = document.getElementById('cart-tooltip');

    var toggle = function () 
        tooltip.hideAllExcept(cartTooltip);
        tooltip.toggle(cartTooltip);
    ;

    return 
        toggle: toggle
    ;
)();

<div class="tooltip tooltip--account" id="user-account-tooltip">
    <span class="tooltip__arrow tooltip__arrow--user-account"></span>
    User Account
</div>

<div class="tooltip" id="cart-tooltip">
    <span class="tooltip__arrow tooltip__arrow--cart"></span>
    Cart
</div>

module.exports = (function () 
    'use strict';

    var tooltips = document.querySelectorAll('.tooltip');

    var hideAll = function () 
        tooltips.forEach(function (element) 
            element.style.display = 'none';
        );
    ;

    var toggle = function (element) 
        element.style.display = element.style.display === 'block' ? 'none' : 'block';
    ;

    var hideAllExcept = function(element) 
        tooltips.forEach(function (el) 
            if (element !== el) 
                el.style.display = 'none';
            
        );
    ;

    document.addEventListener('click', function (e) 
        if (!e.target.closest('.tooltip')) 
            var classListArray = Array.prototype.slice.call(e.target.classList);
            var isSearchIcon = classListArray.indexOf('search-options__icon') > -1;

            if (!isSearchIcon) 
                hideAll();
            
        
    );

    document.addEventListener('keyup', function (e) 
        if (e.key === 'Escape') 
            hideAll();
        
    , true);

    return 
        toggle: toggle,
        hideAllExcept: hideAllExcept
    ;
)();

@import "../core/colors";

@mixin tooltip-upper-arrow 
  position: absolute;
  top: 3px;
  left: -9px;
  content: '';
  border: solid $gold-refresh;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 9px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);


.tooltip 
  position: absolute;
  margin-top: 3rem;
  width: 330px;
  height: 300px;
  background: $black;
  z-index: 1000;
  display: none;
  border: 1px solid $gold-refresh;
  color: $gold-refresh;

  &--cart 
  

  &--user-account 
  

  &__arrow 
    position: absolute;
    top: -26px;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-bottom-color: $black;

    &--cart 
      right: 5px;

      &:before 
        @include tooltip-upper-arrow
      
    

    &--user-account 
      right: 68px;

      &:before 
        @include tooltip-upper-arrow
      
    
  

scss垂直居中[scss](代码片段)

查看详情

scss水平居中[scss](代码片段)

查看详情

scss媒体查询scss(代码片段)

查看详情

scss％extend.scss(代码片段)

查看详情

scss社交媒体颜色scss代码(代码片段)

查看详情

scss[lightbox-scss]#ui#scss(代码片段)

查看详情

scss柔性columns.scss(代码片段)

查看详情

scss重力forms.scss(代码片段)

查看详情

scss链接color.scss(代码片段)

查看详情

scss柔性helpers.scss(代码片段)

查看详情

scss厂商prefix.scss(代码片段)

查看详情

scss断点，v2.scss(代码片段)

查看详情

scss#scss材料设计颜色(代码片段)

查看详情

scss脏base.scss(代码片段)

查看详情

scss嵌套parent.scss(代码片段)

查看详情

scss网格mixin.scss(代码片段)

查看详情

scss形成base.scss(代码片段)

查看详情

scss按钮colours.scss(代码片段)

查看详情