$zindex-tooltip:           1070 !default;
$tooltip-max-width:        200px !default;
$tooltip-color:            #fff !default;
$tooltip-bg:               #000 !default;
// Base class
.dao-tooltip {
  display: inline-block;
}
.dao-tooltip-popper {
  z-index: $zindex-tooltip;
  display: block;
  font-size: 13px;
  line-height: 22px;
  position: absolute;
  // when position error, fixed tooltip twinkle
  pointer-events: none;

  // Wrapper for the tooltip content
  .dao-tooltip-inner {
    max-width: $tooltip-max-width;
    padding: 10px;
    color: $tooltip-color;
    text-align: left;
    background-color: $tooltip-bg;
    border-radius: 5px;
    word-break:break-all;
  }

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

// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.dao-tooltip-popper {
  &[x-placement^="top"] {
    padding: 5px 0 15px;
    .dao-tooltip-arrow {
      bottom: 6px;
      border-width: 13px 13px 0;
      border-top-color: $tooltip-bg;
    }
  }
  &[x-placement^="right"] {
    padding: 0 5px 0 15px;
    .dao-tooltip-arrow {
      left: 6px;
      border-width: 13px 13px 13px 0;
      border-right-color: $tooltip-bg;
    }
  }
  &[x-placement^="bottom"] {
    padding: 15px 0 5px;
    .dao-tooltip-arrow {
      top: 6px;
      border-width: 0 13px 13px;
      border-bottom-color: $tooltip-bg;
    }
  }
  &[x-placement^="left"] {
    padding: 0 15px 0 5px;
    .dao-tooltip-arrow {
      right: 6px;
      border-width: 13px 0 13px 13px;
      border-left-color: $tooltip-bg;
    }
  }
}

.dao-tooltip-popper[x-placement="top"] .dao-tooltip-arrow {
  left: 50%;
  margin-left: -13px;
}
.dao-tooltip-popper[x-placement="top-start"] .dao-tooltip-arrow {
  left: 16px;
}
.dao-tooltip-popper[x-placement="top-end"] .dao-tooltip-arrow {
  right: 16px;
}

.dao-tooltip-popper[x-placement="bottom"] .dao-tooltip-arrow {
  left: 50%;
  margin-left: -13px;
}
.dao-tooltip-popper[x-placement="bottom-start"] .dao-tooltip-arrow {
  left: 16px;
}
.dao-tooltip-popper[x-placement="bottom-end"] .dao-tooltip-arrow {
  right: 16px;
}

.dao-tooltip-popper[x-placement="left"] .dao-tooltip-arrow {
  top: 50%;
  margin-top: -13px;
}
.dao-tooltip-popper[x-placement="left-start"] .dao-tooltip-arrow {
  top: 8px;
}
.dao-tooltip-popper[x-placement="left-end"] .dao-tooltip-arrow {
  bottom: 8px;
}

.dao-tooltip-popper[x-placement="right"] .dao-tooltip-arrow {
  top: 50%;
  margin-top: -13px;
}
.dao-tooltip-popper[x-placement="right-start"] .dao-tooltip-arrow {
  top: 8px;
}
.dao-tooltip-popper[x-placement="right-end"] .dao-tooltip-arrow {
  bottom: 8px;
}