atui/src/styles/tooltip.less

components built with Vue.js

// Tooltip
// --------------------------------------------------
@prefix-cls-tooltip: e("@{prefix-cls}-tooltip");

//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: .9;

//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

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

// Base class
.@{prefix-cls-tooltip} {
  z-index: @zindex-tooltip;
  display: block;
  margin: 0;
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  font-size: @font-size-small;

  opacity: 0.8;

  &.in {
    opacity: @tooltip-opacity;
  }
  &.@{prefix-cls-tooltip}-top, &.@{prefix-cls-tooltip}-top-left, &.@{prefix-cls-tooltip}-top-right {
    margin-top: -3px;
    padding: @tooltip-arrow-width 0;
  }
  &.@{prefix-cls-tooltip}-right, &.@{prefix-cls-tooltip}-right-top, &.@{prefix-cls-tooltip}-right-bottom {
    margin-left: 3px;
    padding: 0 @tooltip-arrow-width;
  }
  &.@{prefix-cls-tooltip}-bottom, &.@{prefix-cls-tooltip}-bottom-left, &.@{prefix-cls-tooltip}-bottom-right {
    margin-top: 3px;
    padding: @tooltip-arrow-width 0;
  }
  &.@{prefix-cls-tooltip}-left, &.@{prefix-cls-tooltip}-left-top, &.@{prefix-cls-tooltip}-left-bottom {
    margin-left: -3px;
    padding: 0 @tooltip-arrow-width;
  }
}

// Wrapper for the tooltip content
.@{prefix-cls-tooltip}-inner {
  max-width: @tooltip-max-width;
  padding: 8px 8px;
  box-sizing: border-box;
  color: @tooltip-color;
  text-align: center;
  background-color: @tooltip-bg;
  border-radius: @border-radius-base;
}

// Arrows
.@{prefix-cls-tooltip}-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.@{prefix-cls-tooltip} {
  &.@{prefix-cls-tooltip}-top .@{prefix-cls-tooltip}-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-top-left .@{prefix-cls-tooltip}-arrow {
    bottom: 0;
    left: 25%;
    margin-left: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-top-right .@{prefix-cls-tooltip}-arrow {
    bottom: 0;
    right: 25%;
    margin-right: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-right .@{prefix-cls-tooltip}-arrow {
    top: 50%;
    left: 0;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-right-top .@{prefix-cls-tooltip}-arrow {
    top: 25%;
    left: 0;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-right-bottom .@{prefix-cls-tooltip}-arrow {
    bottom: 25%;
    left: 0;
    margin-bottom: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }

  &.@{prefix-cls-tooltip}-left .@{prefix-cls-tooltip}-arrow {
    top: 50%;
    right: 0;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-left-top .@{prefix-cls-tooltip}-arrow {
    top: 25%;
    right: 0;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-left-bottom .@{prefix-cls-tooltip}-arrow {
    bottom: 25%;
    right: 0;
    margin-bottom: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }

  &.@{prefix-cls-tooltip}-bottom .@{prefix-cls-tooltip}-arrow {
    top: 0;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-bottom-left .@{prefix-cls-tooltip}-arrow {
    top: 0;
    left: 25%;
    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
  &.@{prefix-cls-tooltip}-bottom-right .@{prefix-cls-tooltip}-arrow {
    top: 0;
    right: 25%;
    margin-right: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}