chenhaodong / mew-iview

  @tooltip-prefix-cls: ~"@{css-prefix}tooltip";

  @tooltip-arrow: ~"@{tooltip-prefix-cls}-arrow";

  @tooltip-max-width: 250px;
  @tooltip-arrow-width: 5px;
  @tooltip-distance: @tooltip-arrow-width - 1 + 4;

  
  @tooltip-arrow-width-light: 7px;
  @tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
  @tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
  @tooltip-arrow-color: hsla(0,0%,85%,.5);

  
  .@{tooltip-prefix-cls} {
      display: inline-block;
  

      &-rel{
          display: inline-block;
          position: relative;
      }
  

      &-popper{

          .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);

      }

      &-light&-popper{

          .popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
  
          &[x-placement^="top"] .@{tooltip-arrow}:after {
              content: " ";
              bottom: 1px;
              margin-left: -@tooltip-arrow-width-light;
              border-bottom-width: 0;
              border-top-width: @tooltip-arrow-width-light;
              border-top-color: #fff;
          }
  
          &[x-placement^="right"] .@{tooltip-arrow}:after {
              content: " ";
              left: 1px;
              bottom: -@tooltip-arrow-width-light;
              border-left-width: 0;
              border-right-width: @tooltip-arrow-width-light;
              border-right-color: #fff;
          }

          &[x-placement^="bottom"] .@{tooltip-arrow}:after {
              content: " ";
              top: 1px;
              margin-left: -@tooltip-arrow-width-light;
              border-top-width: 0;
              border-bottom-width: @tooltip-arrow-width-light;
              border-bottom-color: #fff;
          }
  
          &[x-placement^="left"] .@{tooltip-arrow}:after {
              content: " ";
              right: 1px;
              border-right-width: 0;
              border-left-width: @tooltip-arrow-width-light;
              border-left-color: #fff;
              bottom: -@tooltip-arrow-width-light;
          }
      }

  
      &-inner{
          max-width: @tooltip-max-width;
          min-height: 34px;

          padding: 8px 12px;

          color: @tooltip-color;
          text-align: left;
          text-decoration: none;
          background-color: @tooltip-bg;
          border-radius: @border-radius-small;
          box-shadow: @shadow-base;

          white-space: nowrap;

  
          &-with-width{
              white-space: pre-wrap;
              text-align: justify;
          }

      }
  

      &-light &-inner{
          background-color: #fff;
          color: @text-color;
      }
  

      &-arrow{
          position: absolute;
          width: 0;
          height: 0;
          border-color: transparent;
          border-style: solid;
      }

  
      &-light {
          .@{tooltip-arrow}{
              &:after{
                  display: block;
                  width: 0;
                  height: 0;
                  position: absolute;
                  border-color: transparent;
                  border-style: solid;
                  content: "";
                  border-width: @tooltip-arrow-width-light;
              }
              border-width: @tooltip-arrow-outer-width-light;
          }
      }

  }