通用三角提示框

html： 可配置 tooltips--top-right ......

<div class="tooltips">
        <div class="tooltips-inner">
            <div class="tooltips-cont">
                <div class="tooltips-cont-hd" v-if="this.$slots.title">
                    <slot name="title"></slot>
                </div>
                <div class="tooltips-cont-bd">
                    <slot></slot>
                </div>
            </div>
        </div>
        <span class="tooltips-conner"></span>
    </div>

css：

.tooltips {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}

.tooltips .tooltips-inner {
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.18);
          box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.18);
  min-width: 200px;
}

.tooltips .tooltips-cont-bd {
  padding: 0.3rem;
  font-size: 0.42rem;
  color: #1c1c1c;
}

.tooltips .tooltips-conner {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  left: 20px;
  top: -6px;
}

.tooltips--top-center .tooltips-conner {
  left: 50%;
  margin-left: -3px;
}

.tooltips--top-right .tooltips-conner {
  left: auto;
  right: 20px;
}

.tooltips--bottom-left .tooltips-conner {
  border-width: 7px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
  top: auto;
  left: 20px;
  bottom: -6px;
}

.tooltips--bottom-right .tooltips-conner {
  border-width: 7px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
  top: auto;
  left: auto;
  right: 20px;
  bottom: -6px;
}

.tooltips--bottom-center .tooltips-conner {
  left: 50%;
  margin-left: -3px;
  top: auto;
  bottom: -6px;
  border-width: 7px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
}

.tooltips--left-center .tooltips-conner {
  left: -6px;
  top: 50%;
  margin-top: -7px;
  border-width: 7px 7px 7px 0;
  border-color: transparent #fff transparent transparent;
}

.tooltips--right-center .tooltips-conner {
  left: auto;
  right: -6px;
  top: 50%;
  margin-top: -7px;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent #fff;
}